Question

我正在尝试从选择框进行更改时更新数据。目前，我可以第一次点击按钮，也可以随时更改。但是我无法多次进行改变。

    <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
        }
    }
}

Answer 1

您的代码不完整。我编辑了它并创建了一个小例子。你打电话给Vue.set(this.empData, 'Department', value);。也许有一个拼写错误，因为我找不到this.empData。

更新：不要将camelCase用于您的html属性（使用:empdetails代替:empDetails）。我删除了on change属性并将其替换为计算值。

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>

问题是在vue js 2

1 个答案: