时间戳

首页 > 解决方案 > 如何根据vue js选择的另一个选择选项更改选择选项

javascript - 如何根据vue js选择的另一个选择选项更改选择选项

问题描述

我想使用它，但在 Vue Version 中制作它时遇到了麻烦。我已经在 Vuejs.org 阅读了 Vue 的纪录片，但这并不能帮助我将此脚本迁移到 vue 版本

结构 HTML

<select id="type">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

JS

$(document).ready(function() {

    $("#type").change(function() {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");

        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");

        }
    });


});

标签： javascriptjqueryvue.jsvuejs2

解决方案

这是一个如何做的例子：https ://codepen.io/antoniandre/pen/OJJQMGN?editors=1010

JS

new Vue({
  el: '#app',
  data: () => ({
    selection1: null,
    optionsList: ''
  }),

  methods: {
    changeSelect2 () {
      switch (this.selection1) {
          case 'item1':
            this.optionsList = '<option value="test">item1: test 1</option><option value="test2">item1: test 2</option>'
            break;
          case 'item2':
            this.optionsList = '<option value="test">item2: test 1</option><option value="test2">item2: test 2</option>'
            break;
          case 'item3':
            this.optionsList = '<option value="test">item3: test 1</option><option value="test2">item3: test 2</option>'
            break;
      }
    }
  }
})

HTML

<div id="app">
  <select @change="changeSelect2" v-model="selection1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select>

  <select v-html="optionsList"></select>
</div>

但这肯定不是最干净的方法，我只是按原样转换了您的示例。为了使它更好，这些选项可能应该在一个列表中。

以下是一些入门和理解的教程：

  1. 包含 Vue 库
  2. 永远不要操纵 DOM（除非别无选择），Vue 是数据驱动的
  3. 监听 DOM 元素上的 DOM 事件@eventName
  4. 把你的函数放在methods里面，你的varsdata总是这样
  5. 该v-model属性是一种两种绑定，并在选择列表选定选项更改时触发要自动更改的变量，这称为“反应性”。
  6. 如果您只想保留其文本值而不是 HTML，请将您的变量放在 HTML 内v-html的 HTML 或小胡子中。{{ }}
  7. 遵循一些教程

推荐阅读