vue.js list ( template ) binding not updating when changing data from directive

Question

First of all : I'm using laravel spark and the given setup of vue that comes with spark.

I have a "home" component with the prop "custom". Within custom there's a "passwords" array. (Entry added by code of directive, it's initialized empty)

My component ( alist) which should be bound against the data

<template id="passwords-list-template">
    <div class="password" v-for="password in list">
        <ul>
            <li>{{ password.name }}</li>
            <li>{{ password.description }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    template: '#passwords-list-template',

    props: ['list'],
};
</script>

Usage

<passwords-list :list="custom.passwords"></passwords-list>

Using vue devtools I can see that my data is updating, however my list is not. Also other bindings like

<div v-show="custom.passwords.length > 0">

Are not working ...

UPDATE : Parent component (Home)

Vue.component('home', {
    props: ['user', 'custom'],

    ready : function() {

    }
});

Usage

<home :user="user" :custom="spark.custom" inline-template>

Update 2: I played around a little bit using jsfiddle. It seems like changing the bound data object using $root works fine for me when using a method of a component. However it does not work when trying to access it using a directive

https://jsfiddle.net/wa21yho2/1/

`list` is a prop of `passwords-list`, and `password-list` is a component defined inside other component, I need to see that top component. What I actually want to see is the definition of `custom.passwords` — Yerko Palma, May 31 '16 at 13:35

score 1 · Accepted Answer · answered May 31 '16 at 14:58

There were a lot of errors in your Vue code. First of all, your components where isolated, there wasn't an explicit parent-child relationship.Second, there were errors in the scope of components, you were trying to set data of the parent in the child, also, you were trying to set the value of a prop, and props are by default readonly, you should have written a setter function or change them to data. And finally, I can't understand why were you trying to use a directive if there were methods and events involve?

Anyway, I rewrote your jsfiddle, I hope that you find what you need there. The chain is Root > Home > PasswordList. And the data is in the root but modified in home, the last component only show it. the key here are twoWay properties, otherwise you wouldn't be able to modify data through properties.

Here is a snippet of code

Home

var Home = Vue.component('home', {
    props: {
        user: {
        default: ''
      }, 
      custom: {
        twoWay: true
      }
    },
    components: {
        passwordList: PasswordList
    },
    methods: {
      reset: function () {
        this.custom.passwords = [];
      }
    }
});

// template
<home :custom.sync="spark.custom" inline-template>
  {{custom | json}}
  <button @click="reset">
    reset in home
  </button>
    <password-list :list="custom.passwords"></password-list>

    <password-list :list="custom.passwords"></password-list>
</home>

Here is the full jsfiddle

vue.js list ( template ) binding not updating when changing data from directive

1 Answers1