Javascript 带有Vue JS的下拉列表_Javascript_Html_Vue.js

Javascript 带有Vue JS的下拉列表

javascript html vue.js

Javascript 带有Vue JS的下拉列表,javascript,html,vue.js,Javascript,Html,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

我用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>

操作功能暂时不起作用，未定义的是登录控制台。有什么想法吗

事件应绑定到

事件应将

$event

变量传递给函数

选项的值应绑定到选项本身（

：value=”“

）。您将通过

$event

（

$event.target.value

）获得此值

即使您确实单击了

和

，事件也不是

click（）

，而是

input

或

change

，因为它是一个输入字段。这不是VueJS的问题，而是JavaScript

你的

action（）

方法是一个函数，所以如果你想执行它，那么你必须用parantises（

action（）

）调用它，而不是它的“字符串值”（

action

）。这与VueJS模板中的计算不同，但VueJS会处理差异

请注意您的

todo

-它们都有一个

num

键，值为195（因此您不会在控制台中看到差异，它们都会在那里记录195），尽管它们的标签（

libelle

）表示195和196

编写

console.log（this.todo.num）action（）

方法中，code>和this.todos.num==195
。我猜您试图使用输入中选择的单个todo项。问题是，输入
（以及todo中的todo
）只存在于模板中，您的脚本（如方法
）不知道它们-您必须以某种方式将信息传递给这些脚本（$event
）。如果您想使用整个todo对象，那么我建议使用find（）
（或者filter（）
，因为您的num
值不是唯一的）



newvue({
el:“选择机器”，
数据：{
待办事项：[{
诽谤：“机器195”，
人数：195
},
{
诽谤：“196号机器”，
人数：195
}
]
},
方法：{
行动：功能（事件）{
console.log（event.target.value）
}
}
})

{{todo.libelle}}
试试这个：
<option v-for="todo in todos" @click="action(todo)">
            {{ todo.libelle }} 
</option>

您的数据在action:function（）
this.todos

中被称为

todos

您编写的

this.todo.num

是一个数组，因此

this.todos.num

永远不会是数组中某个项的num属性

<option v-for="todo in todos" @click="action(todo)">
            {{ todo.libelle }} 
</option>

action(todo) { if (todo.num === 195) console.log("J'ai choisi 195"); }