v-model에서 조건부 연산자를 사용하시겠습니까?

v-model에서 조건부 연산자를 사용하시겠습니까?

편집할 선택한 항목의 항목이 채워진 양식을 표시하는 vue 구성 요소가 있습니다.이제 새 항목을 만들기 위해 두 번째 양식을 사용할 필요가 없습니다.현재 v-model로 항목을 자동 채우고 업데이트하면 개체가 분명히 업데이트됩니다.이렇게 조건부 연산자를 사용할 수 없는 건가요?

<form @submit.prevent>
  <div class="field">
    <label class="label">Job Title</label>

    <p class="control">
      <input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
    </p>
  </div>
</form>

조건 연산자를 다음과 같이 사용할 수 있습니다.v-model, 하지만 당신은 줄 수 없다.v-model예를 들어 시도하고 있는 것과 같은 문자열입니다.

편집과 작성에 같은 형식을 사용하지 않습니다(기본 설정일 수도 있습니다).폼을 자체 컴포넌트로 만든 후 편집 및 작성을 위한 폼 컴포넌트를 2개 더 만듭니다.

단, 각 입력의 로직을 정말로 처리하려면v-modeldirective는 3차 연산자의 마지막 부분에 변수를 지정해야 합니다.다음과 같은 경우:

v-model="experiences[i].title ? experiences[i].title : newExperience.title"

eslint-plugin-vue를 사용하면 v-model의 3차 항목에 대한 불만이 제기됩니다.

ESLint: 'v-model' 디렉티브에는 LHS로서 유효한 속성값이 필요합니다(vue/valid-v-model).

그래서 나는 차라리 한쌍을 명시적으로 사용하고 싶다.:value그리고.@input소품

이런 식으로:

<input 
  type="text" 
  class="input" 
  placeholder="Job title" 
  :value="experiences[editIndex].title ? experiences[editIndex].title : ''"
  @input="experiences[editIndex].title = $event.target.value"
/>

또한 @input에 대해 몇 가지 함수를 사용할 수 있습니다.이 함수는 속성이 존재하는지 확인하고 필요에 따라 추가합니다.

언급URL : https://stackoverflow.com/questions/44431507/using-conditional-operators-in-v-model