Javascript 如何将Vue数据绑定到下拉列表_Javascript_Vue.js_Vuejs2

Javascript 如何将Vue数据绑定到下拉列表

javascript vue.js vuejs2

Javascript 如何将Vue数据绑定到下拉列表,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在学习Vue，不知道我在这里做错了什么。数据正在从服务器返回（5条记录），但没有放入；我只得到一个选项，上面写着{{dept.DName}} <html> <head><link href="Content/bootstrap.min.css" rel="stylesheet" /> <meta charset="utf-8" /> <title></title> </head> <bo

我正在学习Vue，不知道我在这里做错了什么。数据正在从服务器返回（5条记录），但没有放入

；我只得到一个选项，上面写着

{{dept.DName}}

<html>
<head><link href="Content/bootstrap.min.css" rel="stylesheet" />
    <meta charset="utf-8" />
    <title></title>
</head>
<body class="container">
<div>
    <select id="deptList">
        <option v-model="selected" v-for="dept in app.depts" v-bind:value="dept.Did">
            {{dept.DName}}
        </option>
    </select>    
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src="Scripts/vue-controller.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

我是一名C#开发人员，所以我有一半的把握我弄乱了这个/那个上下文的东西，但一直无法弄清楚发生了什么。

模板中的变量会自动作用于“app”，所以你需要从模板中删除“app.”，这样它就会被删除

<select id="deptList" v-model="selected">
  <option v-for="dept in depts" v-bind:value="dept.Did">
    {{dept.DName}}
  </option>
</select>


{{dept.DName}}

模板中的变量的作用域自动设置为“app”，所以您需要从模板中删除“app.”，这样它就会

<select id="deptList" v-model="selected">
  <option v-for="dept in depts" v-bind:value="dept.Did">
    {{dept.DName}}
  </option>
</select>


{{dept.DName}}

有几个问题

el

不是数据属性，而是Vue定义对象的根属性

您不应该绑定到

正文

。事实上，Vue将阻止它。绑定到正文内容中的适当元素

v-model

应位于选择按钮上

您不需要

app.depts

。所有数据属性都可以在模板中按名称引用

console.clear（）
警察部门=[
{Did:1，DName:“部门1”}，
{Did:2，DName:“部门2”}，
{Did:3，DName:“部门3”}，
]
var app=新的Vue({
el:“应用程序”，
数据：{
部门：[]，
环境管理计划：[]，
选定：“”
},
方法：{
getDepts:函数（）{
console.log（“我是一个小茶壶”）；//这会出现在日志中
这是.$http.post（“https://httpbin.org/post，部门）。然后（职能（响应）{
this.depts=response.body.json；
},
函数（错误）{
console.log（error.statusText）；
});
}
},
已创建：函数（）{
这个.getDepts（）；
}
})


{{dept.DName}}

所选部门：{{Selected}

有几个问题

el

不是数据属性，而是Vue定义对象的根属性

您不应该绑定到

正文

。事实上，Vue将阻止它。绑定到正文内容中的适当元素

v-model

应位于选择按钮上

您不需要

app.depts

。所有数据属性都可以在模板中按名称引用

console.clear（）
警察部门=[
{Did:1，DName:“部门1”}，
{Did:2，DName:“部门2”}，
{Did:3，DName:“部门3”}，
]
var app=新的Vue({
el:“应用程序”，
数据：{
部门：[]，
环境管理计划：[]，
选定：“”
},
方法：{
getDepts:函数（）{
console.log（“我是一个小茶壶”）；//这会出现在日志中
这是.$http.post（“https://httpbin.org/post，部门）。然后（职能（响应）{
this.depts=response.body.json；
},
函数（错误）{
console.log（error.statusText）；
});
}
},
已创建：函数（）{
这个.getDepts（）；
}
})


{{dept.DName}}

所选部门：{{Selected}

项将在父选择元素中已知

 <select v-model="item.selectedPersonId">
    <option v-for="(item, index) in personList" v-bind:value="item.personId">
          {{ item.personName }}
    </option>
 </select>

为我工作。感谢Vuejs。

项目将在父选择元素中已知

 <select v-model="item.selectedPersonId">
    <option v-for="(item, index) in personList" v-bind:value="item.personId">
          {{ item.personName }}
    </option>
 </select>

为我工作。感谢Vuejs。

我的错，我刚从OP复制了它。v-model应该打开。我删除了

应用程序。

并将v-model移动到

。虽然这更接近正确，但结果是一样的。您是否也纠正了与

el