Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
​
  <button onclick="pretendUpdateEventFromBackend()">Working: Trigger Update Event from Backend</button>
    <button onclick="changeFieldType()">Does not update: Change Type of First Field</button>
   
  <div id="app">
    
    <div class="person" v-for="person in people">
      Name: {{ person.name }}
    </div>
    
    <pre>{{message}}</pre>
    
  </div>
  
</body>
</html>
 
  function changeFieldType()
        {
            //window.app.people[0].name = Date();
          window.app.updatePerson(0, 'new');
        }
​
function pretendUpdateEventFromBackend() {
   var event = new CustomEvent('PersonUpdated', {detail:{index:1, name:'Jimmy'}});
  
  document.dispatchEvent(event);
}
​
var backend = {
  
  listPeopleInDepartment(departmentIndex) {
    return [
      {name:'John'},
      {name:'James'},
      {name:'Jane'}
    ];
  }
}
​
window.app = new Vue({
  el: '#app',
  
  data: {
      message:'',
      departmentIndex:0,
  },
  
   computed: {
    
    people() {
      //return backend.listPeopleInDepartment(this.departmentIndex);
      return [
      {name:'John'},
      {name:'James'},
      {name:'Jane'}
    ];
    }
  },
  
  created() {
    const me = this;
    document.addEventListener('PersonUpdated', function(e){
      
      me.message += 'Updated ';
      
      var personIndex = e.detail.index;
      var newName = e.detail.name;
      
      // How can I update person in the list of computed people here?
      // Or how can I force a reload of the people list?
      
      me.people[personIndex].name = newName;
      
      me.message += 'Person at: ' + personIndex + ' new name: ' + newName + "\n";  
    });
  },
  
  methods:
  {
    updatePerson(index, newName)
    {
      this.people[index].name = newName;
    }
  }
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers