# Vue Live List Error

We seem to have a problem rendering lists inside vue-live (specifically vuepress-vue-live but seems to affect both). Not totally sure if it is isolated to lists or if there are other issues too. Vue live itself seems to work. This is a fresh install of vuepress and vuepress-plugin-live. And it works:

<button v-text="`Live button`" />

But if we have a simple list component:

# List.vue

<template>
  <ul>
    <li
      v-for="(value, key) in items"
      :key="key"
    >
     {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Object,
      required: true
    }
  }
}
</script>

It works when rendering our List component directly on the page.

  • pizza: Pepperoni
  • flavor: Chocolate

But fails when running inside Vue live. This has something to do with the v-for but I don't fully understand what 🤷‍. This used to work with vue-live 1.8.1.

Cannot parse template expression: {pizza: 'Pepperoni', flavor: 'Chocolate'}

Unexpected token (1:34)
<List
  :items="{pizza: 'Pepperoni', flavor: 'Chocolate'}"
/>

If you check the console, there is a big ol' nasty message about ssr missing. Also a curriosity is if you remove the flavor property so its only 1 property it starts working — we suspect it's choking on the comma.

Of note, if you manually set vue-live to 1.9.1 you get an error message in the live window:

Cannot parse template expression: {pizza: 'Pepperoni', flavor: 'Chocolate'}
Unexpected token (1:34)

Vue Live Error