现在有一个component调取php json数据显示一个select, 但是option数据总是显示不出来, 麻烦各位帮忙看一下, 谢谢
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>
<select-work-user default-value="1"></select-work-user>
<script type="text/x-template" id="tpl-select-work-user">
<div>
<select name="worker_id" v-model="worker_id"
style=" display: inline-block;width:200px">
<option v-for="(user, index) in users" v-bind:value="user.id">
{{ user.nickname }}
</option>
</select>
</div>
</script>
<script>
// 使用方法: <select-work-user default-value="1"></select-work-user>
Vue.component('select-work-user', {
props : ['defaultValue'],
template: '#tpl-select-work-user',
data : function () {
var self = this;
return {
users : [],
worker_id: ''
};
},
created : function () {
var self = this;
self.getUsers()
.done(function (users) {
self.users = users;
console.log(self.users);
if (self.defaultValue) {
self.worker_id = self.defaultValue;
} else if (users.length) {
self.worker_id = users[0].id;
}
});
},
methods : {
getUsers: function () {
return $.get('User.php');
},
}
});
new Vue({el: 'select-work-user'});
</script>
</body>
</html>
PHP 代码
<?php
$result[] = [
'id' => 0,
'nickname' => "Maggie",
];
$result[] = [
'id' => 1,
'nickname' => "Jingzi",
];
echo json_encode($result);
谢谢
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
