javascript - Vuejs 2 : Change second select list according to first

Question

我想根据第一个选择列表中的选定值更改第二个选择列表。当我为每个选择执行两个 Vue 实例时，它起作用了，但我想做一个小应用程序，这样它就更干净了。

types JSON 数组需要位于 Vue JS 之外。你可以在 fiddle 中看到它。

不知何故，我只是不知道如何更新第二个选择列表。

在我做了类似的事情并且效果完美之前:

// methods of first select (category)
methods: {
  update: function (value)
     this.options = types[value]
  }
}

...

// methods of second select (typselect)
methods: {
  onChange(event) {
    typselect.update(event.srcElement.value)
  }
}

应用程序:

<div id="app">

  <select v-model="category" v-on:change="onChange">
    <option>Choose</option>
    <option value="5">type1</option>
    <option value="6">type2</option>
    <option value="11">type3</option>
  </select>

  <select id="typselect">
    <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
  </select>

</div>

所以我把它改成了这样:

new Vue({
  el: '#app',

  data: {
    category: '5'
  },

  computed: {
    options: function(event) {
      console.log('should be called on change');

      let options = ''
      options = 1;
      //  options = types[event.srcElement.value]; // this would be so easy...
      return options
    }
  },

  methods: {
    onChange: function(e) {
      console.log(event.srcElement.value);
      this.options = this.options
    }
  }
})

但我只是不知道如何更新第二个选择列表。

这里有一个 fiddle : https://jsfiddle.net/Honkoman/g9g5uukr/2/

Answer 1

你的计算结果应该是这样的。

computed: {
  options: function(event) {
    return types[this.category]
  }
},

已更新fiddle .