Javascript 为什么我的Vue.component不在HTML页面上呈现？_Javascript_Vue.js_Axios

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

javascript vue.js

Javascript 为什么我的Vue.component不在HTML页面上呈现？,javascript,vue.js,axios,Javascript,Vue.js,Axios,我正在尝试创建一个Vue.component，但HTML页面没有呈现给他，chrome没有给出错误。请告诉我哪里出错了，我做错了什么 main.js： Vue.component('product-type-component', { data() { return {listProductType: []} }, beforeMount(){ axios.get('http://localhost/admin/getListProductType') .then(res

我正在尝试创建一个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>

嗯，我想您没有意识到您将Vue作为节点添加到DivMain表单中

作为同级节点，选择节点不在SPA的范围内。此外，我不能完全确定，但我认为在安装过程中，所有其他节点都会从divmainForm中删除

这更像是你想要的：

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

工作样本：

您是否能够从Vue获得任何互动性？你能从一个基本的例子开始吗？你能让这个例子起作用吗？我认为不能在selectItem中使用自定义元素。我认为最好的方法是将属性放入“product type component”中，并将属性selectItem传递给它。也许这可以帮助你：再一次抱歉，我只是想学习。我正在编辑代码，但仍然没有显示vue.component，并且console.logthis.listProductType为空。新的main.js:Vue.component'product-type-component'，{data{return{listProductType:[]}，在安装{axios.get.thenresponse=>{this.listProductType=response.data}控制台.logthis.listProductType}之前，模板：{{index.name}}；这很好，但是试着用`标记代码。试着在这里做你的事情，这样你就可以与你得到的东西共享一个链接，并使用任何开放的api——这样每个人都可以跟进你的想法；我改正了错误，谢谢。我的Vue.com组件：。现在我有一个错误：[Vue warn]：属性或方法索引未在实例上定义，而是在渲染期间引用的。通过初始化属性，确保此属性在“数据”选项中或对于基于类的组件是被动的。不要在模板中使用此属性^^

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