VueJS v-for内部组件模板似乎没有循环

Question

似乎VueJS没有在我的组件内部正确循环。我有一个对象数组，我将它们作为属性传递给组件，我想将它们呈现在组件内部。但是我什么也没收到。

CodePen

下面的示例代码：

<div id="sentimentForm">
  <customer-sentiment :sentiment-types="sentimentTypes" sentiment-selected="neutral"></customer-sentiment>
</div>

var sentimentReasons = [
  {label: 'Happy', value: '3', Display: 'Happy', Key: 'happy'},
  {label: 'Neutral', value: '2', Display: 'Neutral', Key: 'neutral'},
  {label: 'Angry', value: '1', Display: 'Angry', Key: 'angry'}
];

Vue.component('v-select', VueSelect.VueSelect);

Vue.component('customer-sentiment', {
  props: {
    sentiment: {
      default: null
    }, 
    sentimentSelected: {
      default: null
    },
    sentimentTypes: {
      type: Array,
      default() {
        return []
      },
    }
  },
  template: `
  <div v-for="(item, index) in mutableOptions">
    <h3>{{ index }}<h3>
    <h4>{{ item.Display }}<h4>
  </div>`,
  created: function() {
    console.log(this.sentimentTypes)
    this.mutableOptions = this.sentimentTypes;
  },
  data() {
    return {
      mutableOptions: []
    }
  }  
});

var app = new Vue({
  el: '#sentimentForm',
  data: function() {
    return {
      sentiment: '',
      sentimentSelected: '',
      sentimentTypes: sentimentReasons
    }
  }
});

Answer 1

var request = require('request'); var options = { method: 'GET', uri: 'https://www.smashboards.com', rejectUnauthorized: false, headers: { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36' } }; request(options, function (error, response, body) { console.log('error:', error); // Print the error if one occurred console.log('statusCode:'); // Print the response status code if a response was received console.log('body:', body); // Print the HTML for the Google homepage. }); 组件的模板应仅包含一个根元素。该模板当前在第一级中有多个customer-sentiment（来自<div>循环），因此将当前模板嵌套在v-for中应该可以解决此问题。

div