为什么我的Vue.component没有呈现在超文本标记语言页面上？
为什么我的Vue.component没有呈现在超文本标记语言页面上？
提问于 2019-03-21 00:30:38
我正在尝试创建一个Vue.component，但是HTML页面没有呈现给他(chrome没有给出错误)。请告诉我哪里做错了，哪里做错了？
main.js：
Vue.component('product-type-component', {
data() {
return {listProductType: []}
},
beforeMount(){
axios.get('http://localhost/admin/getListProductType')
.then(response => {
this.listProductType = response.data
})
},
template:'<option v-for="index in listProductType" v-bind:value="index.id + "/" + index.name">{{index.name}}</option>'
});
var vm = new Vue({
el: "#mainForm",
data:{...},
beforeMount(){...},
methods:{...}
});index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title></title>
</head>
<body>
<div id="mainForm">
<select v-model="selectItem">
<product-type-component></product-type-component>
</select>
</div>
<script type="text/javascript" src="script\vue\vue.js"></script>
<script src="script\axios\axios.min.js"></script>
<script type="text/javascript" src="script\main.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-21 06:34:21
嗯，我想你没有意识到你把你的Vue作为node添加到了div#mainForm中。
作为同级节点，选择节点不在您的SPA范围内。此外，我不能完全确定，但我认为在挂载过程中，所有其他节点都会从div#mainForm中删除
它更像是你想要的：
import Vue from "vue";
Vue.config.productionTip = false;
Vue.component("product-type-component", {
data() {
return { listProductType: [] };
},
beforeMount() {
// axios.get('http://localhost/admin/getListProductType')
// .then(response => {
// this.listProductType = response.data
// })
},
template: "<option " + /* v-for... */ ">some option</option>"
});
new Vue({
el: "#app",
template: `<select><product-type-component></product-type-component></select>`
});工作示例：sandbox
import Vue from "vue";
import { METHODS } from "http";
import * as axios from "axios";
Vue.config.productionTip = false;
var productTypeComponent = Vue.component("product-type-component", {
data() {
return { listProductType: [] };
},
beforeMount() {
axios.get("https://dog.ceo/api/breeds/list/all").then(response => {
console.log(response);
this.listProductType = Object.keys(response.data.message);
});
console.log("///" + this.listProductType);
},
template:
'<select><option v-for="(item, index) in listProductType" v-bind:value="item">{{item}}</option></select>'
});
var vm = new Vue({
el: "#app",
data: {},
methods: {},
template: `<div><product-type-component /></div>`
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55265769
复制相关文章
相似问题