在Vue.js中，資料響應式是透過偵測資料物件的變化來觸發的。在JavaScript中，當一個物件被建立後，可以動態地新增或刪除屬性。但是，這種屬性變化在Vue.js中是不會被偵測到的。
這就是為什麼在Vue.js中，如果需要對資料進行動態新增或刪除屬性時，需要使用Vue.set或this.$set方法來觸發資料響應式，從而使元件重新渲染。同樣地，如果更改資料但是沒有觸發響應式更新，可以使用this.$forceUpdate()手動強制更新視圖。
分類: vue
VueJS: How to output a comma separated array?
source: René Roth (2018), https://stackoverflow.com/questions/42129534/vuejs-how-to-output-a-comma-separated-array
If all you care about is comma separation, use Javascript’s built-in join method:
{{ list.join(', ') }}
For arrays of objects, you could do something like this:
{{ list.map(entry => entry.title).join(', ') }}Vue.js table template v-for Example
<div id="maintable">
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">連結</th>
<th scope="col">名稱</th>
</tr>
</thead>
<tbody>
<template v-for="(item, index) in menulist">
<tr>
<th>{{ index + 1 }}</th>
<td><a :href="item.dm_link">{{ item.dm_key }}</a></td>
<td>{{ item.dm_name }}</td>
</tr>
</template>
</tbody>
</table>
</div>let maintable = new Vue({
el: '#maintable',
data: {
menulist: [
{dm_key: 'TW1', dm_link: 'menu/TW1', dm_name: 'Innonext 1'},
{dm_key: 'TW2', dm_link: 'menu/TW2', dm_name: 'Innonext 2'},
{dm_key: 'TP1', dm_link: 'menu/TP1', dm_name: 'Innonext 3'},
{dm_key: 'TP2', dm_link: 'menu/TP2', dm_name: 'Innonext 4'},
]
},
methods: { }
});