Vue.js

Question

我有一些 vue.js 组件，所有这些组件都从外部获取数据。

示例：

<vue-button icon="fa-arrow-right" text="mytext"></vue-button>

到目前为止效果很好，但现在我必须在属性上设置多个值。

这不起作用：

<vue-list items="['Entry1', 'Entry2']"></vue-list>

如何在一个值上设置多个值属性？

更新

我有一个工作示例，但我不确定这是否是正确的方法，但它确实有效。如果有人知道更好的方法，如果您与 me/us 分享我会很高兴。

我是这样称呼组件的：

<vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

这是组件的代码：

<template>
    <div>
        <div v-for="item in timesArray">
            <span v-html="item"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['times'],
    data: function() {
        return {
            timesArray: [],
        }
    },
    created: function() {
        this.timesArray = JSON.parse(this.times);
    }
}
</script>

Answer 1

不会是你错过了关闭Entry 2字符串吧？

<vue-list items="['Entry1', 'Entry2]"></vue-list>

正确的代码是

<vue-list items="['Entry1', 'Entry2']"></vue-list>

如果组件逻辑没问题，我认为应该可以。

Answer 2

您必须仅使用 vue 实例变量传递它，请参阅此 fiddle。

<div id="app">
  <child  :items="items"></child>
</div>

其中项目定义为 vue 实例数据：

new Vue({
  el: '#app',
  data: {
    full_name: "Initial Val",
    items: ['Entry1', 'Entry2']
  }
})

Answer 3

使用属性绑定语法。

<vue-list :times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

注意:times前面的冒号。您不需要解析或使用数据。

Vue.js - 如何在属性上为组件设置多个值（数组）？

Vue.js - How to set multiple values (array) for a component over a property?

javascript

vue-component

vuejs2

更新

Vue.js - 如何在 属性 上为组件设置多个值（数组）？

Vue.js - How to set multiple values (array) for a component over a property?

javascript

vue.js

vue-component

vuejs2

更新

Vue.js - 如何在属性上为组件设置多个值（数组）？