为什么我的Vue.component没有在HTML页面上呈现？

Question

i'm try to create a Vue.component, but HTML page is not render him (chrome does not give a errors). 我正在尝试创建Vue.component，但是HTML页面无法呈现他（chrome不会给出错误）。 Please tell me where I made a mistake, what I'm doing wrong? 请告诉我我哪里做错了，我做错了什么？

main.js: 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 的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>

Answer 1

Hmm, I think you didnt realize that you add your Vue as a node to the div#mainForm . 嗯，我想您没有意识到您将Vue作为node添加到div#mainForm 。

As a sibling the select node is not in scope of your SPA. 作为同级，选择节点不在SPA的范围内。 And furthermore - I am not overall sure - but I think during the mounting process all other nodes are removed from div#mainForm 而且-我不确定-但是我认为在安装过程中，所有其他节点都从div#mainForm中删除了

It is more like this you want: 您想要的更像这样：

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>`
});

working sample: 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>`
});

为什么我的Vue.component没有在HTML页面上呈现？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-03-20 22:34:20

为什么我的Vue.component没有在HTML页面上呈现？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-03-20 22:34:20

解决方案1
1 已采纳 2019-03-20 22:34:20