Почему мой Vue.component не отображается на странице HTML? - PullRequest
Новая
       1

Почему мой Vue.component не отображается на странице HTML?

0 голосов
/ 20 марта 2019

Я пытаюсь создать компонент 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 Ответ

1 голос
/ 21 марта 2019

Хм, я думаю, вы не поняли, что добавляете 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>`
});

рабочий образец: песочница 

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>`
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...