問題是更新道具與更改（@change）vue js 2

我試圖從選擇框更改on-change時更新數據。目前，我可以第一次點擊按鈕，也可以隨時更改。但是，我無法多次進行轉換。問題是更新道具與更改（@change）vue js 2

<template> 
    <div> 
     <div class="row"> 
      <select v-model="selectedemp" @change="filterempdata($event.target.value)"> 
       <option value="">Select emp/option> 
       <option v-for="option in empfilterlist" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option> 
      </select> 
     </div> 
     <div class="row"> 
      <empView v-if='loaded' :empDetails='empData'></empView> 
     </div> 
     <div class="col-lg-6 col-md-6"> 
      <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getEmpDetails">Fetch Data</button> 
     </div> 
    </div> 
</template>

JavaScript部分：

data() { 
     return { 
     loaded: false, 
     empData: {}, 
     empfilterlist: [ 
      { text: 'Department', value: '1' }, 
      { text: 'Status', value: '2' }, 
     ], 
     selectedemp: '', 
    } 
}, 
methods: { 
    filterempdata: function (selectedoption) { 
     console.log('Onchange value - ' + selectedOption) 
     Vue.set(this.empData, 'Department', selectedoption) 
    }, 

    getEmpDetails: function() { 
     this.$http.get('http://localhost:7070/getemmdata') 
      .then((response) => { 
      this.empData = response.data 
      this.loaded = true 
     }, 
     response => { 
      console.log('test' + JSON.stringify(response)) 
     } 
    ) 
}

兒童組成的javascript代碼：

export default { 
    name: 'empView', 
    props: ['empDetails'], 
    data() { 
     return { 
      empid: this.empDetails.id, 
      empname: this.empDetails.name 
     } 
    }, 
    watch: { 
     empDetails: function (changes) { 
      console.log('data updated ' + JSON.stringify(changes)) 
      this.empid = changes.id 
      this.empname = changes.name 
      this.department = changes.Department 
     } 
    } 
}

來源

2017-09-06 krrr25

您的數據** ** emptData但在你的方法，你指的是** ** EMPDATA。錯字？ –

@Steve Holgado是的，這是錯字。對不起。 – krrr25

您的代碼是不完整的。我編輯了它並創建了一個小例子。您致電Vue.set(this.empData, 'Department', value);。也許有一個拼寫錯誤，因爲我找不到。

UPDATE：不要使用駝峯你的HTML屬性（使用:empdetails而不是:empDetails）。我已經刪除了更改屬性並將其替換爲計算值。

const empview = { 
 
    name: 'empview', 
 
    template: '<div>ID: {{empid}} TITLE: {{empname}} RANDNUM: {{random}}</div>', 
 
    props: ['empdetails'], 
 
    computed: { 
 
    empid() { 
 
     return this.empdetails.id; 
 
    }, 
 
    empname() { 
 
     return this.empdetails.name; 
 
    }, 
 
    random() { 
 
     return this.empdetails.random; 
 
    } 
 
    }, 
 
    watch: { 
 
    workflowDetails(changes) { 
 
     console.log('data updated ' + JSON.stringify(changes)) 
 
     this.empid = changes.id 
 
     this.empname = changes.name 
 
     this.department = changes.Department 
 
    } 
 
    } 
 
}; 
 

 

 
new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    empview 
 
    }, 
 
    data() { 
 
    return { 
 
     loaded: false, 
 
     empData: {}, 
 
     empfilterlist: [ 
 
     { 
 
      text: 'Department', 
 
      value: '1' 
 
     }, 
 
     { 
 
      text: 'Status', 
 
      value: '2' 
 
     } 
 
     ], 
 
     selectedemp: '' 
 
    } 
 
    }, 
 
    watch: { 
 
    // triggers on change 
 
    selectedemp(value) { 
 
     // your filterempdata() code 
 
     console.log(value); 
 
    } 
 
    }, 
 
    methods: { 
 
    /*getEmpDetails() { 
 
     this.$http.get('http://localhost:7070/getemmdata') 
 
     .then((response) => { 
 

 
     this.empData = response.data 
 
     this.loaded = true 
 
     }, (response) => { 
 
     console.log('test' + JSON.stringify(response)) 
 
     }) 
 
    }*/ 
 
    getEmpDetails() { 
 
     console.log('getEmpDetails()'); 
 
     const data = this.empfilterlist.filter((emp) => emp.value == this.selectedemp)[0]; 
 

 
     if(data) { 
 
     this.empData = { 
 
      id: data.value, 
 
      name: data.text, 
 
      random: Math.random() 
 
     }; 
 

 
     this.loaded = true; 
 
     } 
 
    } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
</head> 
 

 
<body class="container"> 
 

 
    <div id="app"> 
 
    <div> 
 
     <div class="row"> 
 
     <select v-model="selectedemp"> 
 
      <option value="">Select emp</option> 
 
      <option v-for="option in empfilterlist" :value="option.value" :key="option.value">{{option.text}}</option> 
 
     </select> 
 
     </div> 
 
     <div class="row"> 
 
     <empview v-if='loaded' :empdetails='empData'></empview> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6"> 
 
     <button type="button" id="btn2" class="btn btn-danger btn-md" @click="getEmpDetails">Fetch Data</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
<script src="https://vuejs.org/js/vue.js"></script> 
 
</body> 
 
</html>

來源

2017-09-06 07:35:33 Phil

我更新了錯字。問題仍然存在，當我不斷地進行轉換時，我無法獲得子組件的價值。 – krrr25

我已經更新了我的答案。希望這會有所幫助。用您的ajax調用替換'getEmpDetails'。 @ krrr25 – Phil

您可以通過連續更改下拉菜單並單擊獲取數據按鈕來嘗試您的代碼片段。它不會從第二次發射。第一次只是過濾。 – krrr25

問題是更新道具與更改（@change）vue js 2

回答

相關問題