javascript - 选择元素更改后 Vue.js 不重新渲染

Question

使用 Vue.js。

我有两个对象数组，category 和categoryPar，category 包含姓名和 parent 的姓名，categoryPar 包含只是名字。我只想显示属于所选父项的类别。尝试这样做:

<select v-model="editing.categoryPar"">
       <option v-for="cat in categoryPar" v-bind:value="cat.name">{{ cat.description }}</option>
</select>
<select v-model="editing.category">
       <option v-for="cat in category" v-if="editing.categoryPar == cat.par_name" v-bind:value="cat.name">{{ cat.description }}</option>
</select>

条件已满足但未重新呈现。当我在控制台中使用 vue.$forceUpdate();然后它起作用，直到我更改父选择。

谢谢你的帮助。

Answer 1

您需要先为所选模型创建一个变量。

目前你正在给你的 v-model 一个对象，这就是它不起作用的原因

new Vue({
  el: '#app',

  data () {
    return {
      selectedCategory:  '', 
      category: [{name: 'A', parent: 'Alpha'}, {name: 'B', parent: 'Bravo'}, {name: 'C', parent: 'Charlie'}],
      categoryPar: [{name: 'A'}, {name: 'B'}, {name: 'C'}],
    }
  },
})

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>


<div id="app">

  <pre>Selected Cat: {{selectedCategory}}</pre>

  <select name="" id="" v-model='selectedCategory'>
    <option :value="cat.name" v-for="cat in category"> {{ cat.name }}</option>
  </select>

  <select name="" id="">
    <option value="" v-for="cat in categoryPar" v-if="cat.name === selectedCategory"> {{ cat.name }}</option>
  </select>

</div>