Question

这是预期的输出：

<div class="container">
    <div class="wrapper">
        <div class="title">Title 1</div>
        <div class="text"><p>Text 1</p></div>
    </div>
    <div class="wrapper">
        <div class="title">Title 2</div>
        <div class="text"><p>Text 2</p></div>
    </div>
    ...
</div>

这是我的PHP文件：

// Contains HTML markup
$array = [
    ['title' => 'Title 1', 'text' => '<p>Text 1<\/p>'],
    ['title' => 'Title 2', 'text' => '<p>Text 2<\/p>'],
    ...
];

<div class="container" data-content="'.json_encode($array).'">
    <list-item v-for="item in list" v-bind:list-prop="item" v-bind:key ="item.title"></list-item>
</div>

这是我的JavaScript文件：

var containers = document.querySelectorAll('.container');
if(containers.length > 0) {
    for(var i=0; i<containers.length; i++)
        buildList(containers[i]);
}

function buildList(el) {

    Vue.component('list-item', {
        props: ['listProp'],
        template: '<div class="wrapper"><div class="title">{{ listProp.title }}</div><div class="text">{{ listProp.text }}</div></div>'
    });

    var container = new Vue({
        el: el,
        data: {
            list: JSON.parse(el.dataContent)
        }
    });
}

我收到错误Unexpected token u in JSON at position 0 at JSON.parse我显然做错了但我不确定在哪里。很想知道是否有更好的方法来实现这一目标。我使用:prop阅读答案，但我不知道如何在我的案例中实现它。

Answer 1

我真的很讨厌这个建议，但是如果不用PHP创建一个简单的REST API，你就可以做到这一点。然后，一旦在window对象上有了这个对象，就可以在Vue.js代码中引用它。

// Contains HTML markup
<?php
$array = [
    ['title' => 'Title 1', 'text' => '<p>Text 1<\/p>'],
    ['title' => 'Title 2', 'text' => '<p>Text 2<\/p>'],
    ...
];
?>
<script>
  const titles = <?php echo $array; ?>
</script>
<div class="container">
    <list-item v-for="item in list" v-bind:list-prop="item" v-bind:key ="item.title"></list-item>
</div>

将json传递给Vue组件并循环

1 个答案: