Vue가 선택한 프로포트가 v-model과 함께 작동하지 않음

Vue가 선택한 프로포트가 v-model과 함께 작동하지 않음

그:selected소품이 대상을 선택하지 않았습니다.option사용할 때 Vue2에서v-model위해서select:

템플릿

...
<select v-model="form.item">
    <option :value="item.id" v-for="(item, index) in items" :selected="item.status == 2">{{ item.name }}</option>
</select>
...

대본

data: function () {
    return {
        items: [{id:1, name: "foo", status: 1},{id: 3, name: "bar", status: 2}],
        form: {item: null}
    }
}

이 경우 마운트 후 옵션은 선택되지 않습니다.

어떻게 하면 고칠 수 있지?

메모

제거할 때v-model정상적으로 동작합니다(타깃).option디폴트로 선택되어 있습니다만, 선택한 값이 없습니다.option에form.item

v-model은 초기 값, 선택되거나 선택된 특성을 무시합니다.임의의 폼 요소에서 발견되다

해결책은:선택된 바인딩을 제거하고 데이터 소품을 사용하여 v-model에 바인딩하는 것입니다.

<select v-model="form.selectedItem">
   <option :value="item.id" v-for="(item, index) in items">{{ item.name }}
   </option>
</select>

vue 인스턴스를 선언하다

data() {
 return {
  selectedItem: 2
 }
}

공문서 링크

또 다른 해결책은$refsv-model 대신.

<select ref="selectedItem">
   <option v-for="(item, index) in items" :value="item.id" :selected="item.status == 2">
      {{ item.name }}
   </option>
</select>

그런 다음 선택한 항목의 값을 얻으려면...

this.$refs.selectedItem.value

언급URL : https://stackoverflow.com/questions/46772060/vue-selected-prop-not-working-with-v-model