vue.js의 v-model에서 3진 연산자를 올바르게 적용하는 방법

vue.js의 v-model에서 3진 연산자를 올바르게 적용하는 방법

v-model에서 3진 연산자를 적용하려고 하는데 작동이 되지 않습니다.stackoverflow에 관한 비슷한 질문과 답변도 많이 읽었지만 내 질문에 대한 답변은 없습니다.

기본적으로 false로 설정되어 있는 데이터 변수 testCondition을 만들었습니다.이 조건의 사용testCondition?name:placetestCondition이 false이면 위치가 v-model에서 반환되지만 testCondition이 true이면 v-model에서 아무것도 반환되지 않습니다.

코드는 다음과 같습니다.

new Vue({
  el: "#app",
  data: {
    name: '',
    place: '',
    testCondition: false,
  },
})

body {
  padding: 15px;
}

input {
  border-radius: 3px;
  padding: 5px;
  border: thin solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <br>
  <input type="text" v-model="testCondition?name:place">
  <br><br> Test condition status: {{testCondition}}
  <br> Name: {{name}}
  <br> Place: {{place}}
</div>

예상 결과: testCondition 값을 false에서 true로 변경하면 {{name}}에 출력이 표시됩니다.

실제 결과:testCondition이 false로 설정되어 있는 경우 {{place}}에서만 동작합니다.

이것을 시험해 보세요.<input type="text" v-model="$data[testCondition ? 'name' : 'place']">

new Vue({
  el: "#app",
  data: {
    name: '',
    place: '',
    testCondition: false,
  },
})

body {
  padding: 15px;
}

input {
  border-radius: 3px;
  padding: 5px;
  border: thin solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <br>
  <input type="text" v-model="$data[testCondition ? 'name' : 'place']">
  <br><br> Test condition status: {{testCondition}}
  <br> Name: {{name}}
  <br> Place: {{place}}
</div>

getter와 setter가 있는 계산 속성이 필요합니다.https://vuejs.org/v2/guide/computed.html#Computed-Setter

computed: {
  myModel: {
    get() {
      return this.testCondition ? this.name : this.place;
    }
    set(newValue) {
      this.doSomethingWith(newValue);
    }
}
// then in template: v-model="myModel"

언급URL : https://stackoverflow.com/questions/54366269/how-to-properly-apply-ternary-operator-in-v-model-in-vue-js