小编Chr*_*ris的帖子

我对vue相当新,无法弄清楚如何在模板中添加数据值.我正在尝试构建一个非常基本的表单构建器.如果我单击一个按钮,它应该将另一个数据数组添加到组件变量中.这很有效.我正在做一个v-for来添加输入字段,其中一些属性是该组件的数组的一部分.我得到它所以它将添加输入但没有值传递到输入.

我已经创建了一个jsfiddle,我被困在哪里.https://jsfiddle.net/a9koj9gv/2/

<div id="app">
    <button @click="add_text_input">New Text Input Field</button>
    <my-component v-for="comp in components"></my-component>
    <pre>{{ $data | json }}</pre>
</div>

new Vue({
    el: "#app",

    data: function() {
        return {
            components: [{
                    name: "first_name",
                    showname: "First Name",
                    type: "text",
                    required: "false",
                    fee: "0"
                  }]
            }
    },

    components: {
        'my-component': {
            template: '<div>{{ showname }}: <input v-bind:name="name" v-bind:type="type"></div>',
            props: ['showname', 'type', 'name']
        }

    },

    methods: {
        add_text_input: function() {
            var array = {
                    name: "last_name",
                    showname: "Last Name",
                    type: "text",
                    required: "false", …

我有使用 d3.js 创建图表的数据。我有那部分工作对数据进行硬编码

var data = {
            "name": ["A", "B", "C", "D", "E"],
            "vals": [48, 35, 34, 21, 11]
        }

我正在努力的地方是将数据放入我的刀片模板的 javascript 部分。我试图对以下内容进行硬编码，我得到一个 htmlspecialchars() 期望参数 1 是字符串，给定的对象。

$test = json_encode([
            "name" => ["A", "B", "C", "D", "E"],
            "vals"=> [48, 35, 34, 21, 11]
        ]);

在刀片的脚本区域中使用这个

var test = {{json_decode($test)}};

如果我不执行 json_decode 我不会收到错误，但它会将我的 " 转换为 " ，这显然不起作用。

我知道我只是在这里错过了一些东西来使它工作，但也许我会做一个新方法并做一个 ajax 调用来获取它。

任何想法或提示都会有所帮助