CODEWITHSUNDEEP
javascriptvue.jsaxios
lobs
lobs

Reputation: 439

Why my Vue.component is not rendered at HTML page?

i'm try to create a Vue.component, but HTML page is not render him (chrome does not give a errors). Please tell me where I made a mistake, what I'm doing wrong?

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>

Upvotes: 0

Views: 2450

Answers (1)

Estradiaz
Estradiaz

Reputation: 3563

Hmm, I think you didnt realize that you add your Vue as a node to the div#mainForm.

As a sibling the select node is not in scope of your SPA. And furthermore - I am not overall sure - but I think during the mounting process all other nodes are removed from 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>`
});

Upvotes: 1

Related Questions