时间戳

首页 > 解决方案 > 使用 Vue JS 的下拉列表

javascript - 使用 Vue JS 的下拉列表

问题描述

我用 HTML CSS 和 VueJS 编写了一个带有下拉列表的 html 页面。我希望如果我单击下拉列表中的某个选项，它会在控制台中显示一些内容。

我的html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="js/historique.js"></script>

    <title>Historique</title>
</head>
<body>
    <select id="selectionMachines" size="1">
        <option v-for="todo in todos"  v-on:click="action">
            {{ todo.libelle }}
        </option>
    </select>
</body>
</html>

还有我的 JS 代码：

window.onload = function () {
    var machines = new Vue({
        el:"#selectionMachines",
        data: {
            todos: [
                { libelle: "Machine 195", num: 195},
                { libelle: "Machine 196", num: 195}
            ]
        },
        methods: {
            action: function() {
                console.log(this.todo.num);
                if (this.todos.num == 195)
                    console.log("J'ai choisi 195");
            }
        }
    })
}

动作功能暂时不起作用，未定义是登录控制台。任何想法 ？

标签： javascripthtmlvue.js

解决方案

  1. 该事件应绑定到<select>.

  2. 事件应该将$event变量传递给函数

  3. 选项的值应绑定到选项本身 ( :value="")。您将使用$event( $event.target.value)获得此值

  4. 即使您从字面上单击 a<select>和<option>，事件也不是click()，而是inputor change，因为它是一个输入字段。这不是 VueJS 问题，而是 JavaScript。

  5. 你的action()方法是一个函数，所以如果你想让它被执行，那么你必须用括号（action()）调用它，而不是它的“字符串值”（action）。这与VueJS 模板中的计算不同，但 VueJS 处理了差异。

  6. 注意你的todos- 两者都有一个num值为195的键（所以你不会在控制台中看到差异，两者都会在那里记录195），尽管它们的标签 ( libelle) 表示 195 和 196

  7. 你用你的console.log(this.todo.num);方法写作。我猜您尝试使用输入中选择的单个待办事项。这样做的问题是（和）只存在于您的模板中，您的脚本（如）不知道它们 - 您必须以某种方式将信息传递给这些脚本（对此有好处）。如果您想使用整个单个 todo 对象，那么我建议（或者因为您的值不是唯一的）。this.todos.num == 195action()inputtodo in todosmethods$eventfind()filter()num

new Vue({
  el: "#selectionMachines",
  data: {
    todos: [{
        libelle: "Machine 195",
        num: 195
      },
      {
        libelle: "Machine 196",
        num: 195
      }
    ]
  },
  methods: {
    action: function(event) {
      console.log(event.target.value)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<select id="selectionMachines" size="1" @change="action($event)">
  <option v-for="todo in todos" :value="todo.num">
    {{ todo.libelle }}
  </option>
</select>

推荐阅读