VueJsコンポーネントは未定義です

Question

私はvue.jsを初めて使用しています。コンポーネントcomp1は動作していません。

HTML

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

スクリプト

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' 
}) 

Answer 1

あなたのコンポーネントは次のようになります。

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

あなたがここに単一引用符が欠落していた

：'comp1, {であり、複数行のテンプレートをバッククォートで囲む必要があります。

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>