Question

我想根据第一个选择的值更改第二个选择列表。当我为每个选择做两个Vue实例时，它工作，但我想做一个小应用程序，所以它更清洁。

types JSON数组需要在Vue JS之外。你可以在小提琴里看到它。

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

在我做这样的事情之前，它完美地运作了：

// 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
    }
  }
})

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

这里有一个小提琴： https://jsfiddle.net/Honkoman/g9g5uukr/2/

Answer 1

你的计算机应该是这样的。

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

更新了fiddle。

Vuejs 2：根据第一个更改第二个选择列表

1 个答案: