javascript — передача json компоненту Vue и цикл

Question

javascript — передача json компоненту Vue и цикл

Это ожидаемый результат:

<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 но я не знаю, как реализовать это в моем случае.

1

javascript php vue-component vue.js

Решение

По вопросам рекламы [email protected]

Accepted Answer

Я ДЕЙСТВИТЕЛЬНО ненавижу это предложение, но вот что вы можете сделать, не создавая простой REST API с PHP. Затем, когда у вас есть этот объект в объекте окна, вы можете ссылаться на него в своем коде 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>

0

Другие решения

Других решений пока нет …

Источник