VueJs 组件未定义 [英] VueJs component undefined

问题描述

我是 vue.js.组件 comp1 似乎不起作用.

HTML

<comp1></comp1>

脚本

var data1={selected: null, items:["degradant", "impurity"]};Vue.component('comp1, {模板:'<select v-model="selected"><option disabled value="">请选择</option><option v-for="item in items" :value="item">{{item}}</option></选择>',数据:函数(){返回数据1}});新的 Vue({el: '#example-2'})

解决方案

你的组件应该是这样的:

Vue.component('comp1', {模板:`<select v-model="selected"><option disabled value="">请选择</option><option v-for="item in items" :value="item">{{item}}</option></选择>`,数据:函数(){返回数据1}});

您在这里缺少一个单引号:'comp1, {，并且您必须用反引号将多行模板括起来，`.

console.clear()var data1={selected: null, items:["degradant", "impurity"]};Vue.component('comp1', {模板:`<select v-model="selected"><option disabled value="">请选择</option><option v-for="item in items" :value="item">{{item}}</option></选择>`,数据:函数(){返回数据1}});新的 Vue({el: '#example-2'})

<script src="https://unpkg.com/vue@2.4.2"></script><div id="example-2"><comp1></comp1>

I am new to vue.js. The component, comp1 doesn't appear to work.

HTML

<div id="example-2">
  <comp1></comp1>
</div>

Script

var data1={selected: null, items:["degradant", "impurity"]};

Vue.component('comp1, {
  template:'<select v-model="selected">
             <option disabled value="">Please select</option>
             <option v-for="item in items" :value="item">{{item}}</option> 
           </select>',
  data: function(){
    return data1
  }            
});

new Vue({
  el: '#example-2'
})

解决方案

Your component should look like this:

Vue.component('comp1', {
  template:`<select v-model="selected">
             <option disabled value="">Please select</option>
             <option v-for="item in items" :value="item">{{item}}</option> 
           </select>`,
  data: function(){
    return data1
  }            
});

You were missing a single quote here: 'comp1, {, and you have to surround multi-line templates with backticks, `.

console.clear()

var data1={selected: null, items:["degradant", "impurity"]};

Vue.component('comp1', {
  template:`<select v-model="selected">
             <option disabled value="">Please select</option>
             <option v-for="item in items" :value="item">{{item}}</option> 
           </select>`,
  data: function(){
    return data1
  }            
});

new Vue({
  el: '#example-2'
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="example-2">
  <comp1></comp1>
</div>

这篇关于VueJs 组件未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！