vue项目中已经声明了函数, 但是调用的时候说没有定义?

Question

html

<select name="" class="select-menu" id="sel_dropDownName" onchange="changeMonitorData(this)">
    <option value="1">孔江湿地公园管理处气象站 -- 2018-03-29 17:10:48</option>
    <option value="2">马圆水文站 -- 2018-01-01 12:08:01</option>
    <option value="3">孔江大坝水文站 -- 2018-03-29 17:10:14</option>
</select>

js

export default {
  data() {
    return {
      data: {},
      resData: {}
    };
  },
  methods: {
    /* Select选项 */
    changeMonitorData(node) { 
      var index = $(node).val();
      console.log("index", index);
      $("#div_data_" + index).css("display", "");
      $("#div_data_" + index)
        .siblings("div")
        .css("display", "none");

      $("#div_monitorCharts")
        .children("div")
        .css("display", "none");
      $(".div-charts-" + index).css("display", "");
    },
  },
  mounted() {
    this.changeMonitorData();
  }
};

    /* 获取最新的数据 */
    getNewestData() {
      this.$http.get(this.$api.dataChart).then(res => {
        var nameSet = new Set();
        var dataHtml = "";

        if (res) {
          var firstIndex = true;
          var idIndex = 1;
          var optionIdIndex = 1;

          for (var key in res.data.data) {
            var deviceData = res.data.data[key];

            if (firstIndex) {
              dataHtml +=
                "<div style='width: 100%; height:100%' id='div_data_" +
                idIndex +
                "'>";
              firstIndex = false;
            } else {
              dataHtml +=
                "<div style='width: 100%; height:100%; display: none' id='div_data_" +
                idIndex +
                "'>";
            }
            idIndex += 1;

            for (var deviceKey in deviceData) {
              var valueData = deviceData[deviceKey];
              var name = valueData.deviceName + " -- " + valueData.date;

              nameSet.add(name);


              dataHtml +=
                '<div class="data-block"><img class="data-block-icon" src="${pageContext.request.contextPath}/js/static/images/index/' +
                deviceKey +
                '.png" alt="">' +
                valueData.value +
                '<span class="data-block-unit">' +
                valueData.unit +
                '</span><span class="data-block-name">' +
                deviceKey +
                "</span></div>";
            }

            dataHtml += "</div>";
          }

          var dropDownHtml = "";
          nameSet.forEach(function(element, sameElement, set) {
            dropDownHtml +=
              '<option value="' +
              optionIdIndex++ +
              '">' +
              element +
              "</option>";
          });

          $("#div_monitorData").empty();
          $("#div_monitorData").html(dataHtml);

          var dataIndex = $("#sel_dropDownName").val();
          $("#sel_dropDownName").empty();
          $("#sel_dropDownName").append(dropDownHtml);
          $("#sel_dropDownName").val(dataIndex);

          $("#div_data_" + dataIndex).css("display", "");
          $("#div_data_" + dataIndex)
            .siblings("div")
            .css("display", "none");
        }
      });
    },

1. 这是我打印changeMonitorData()函数的值

1. changeMonitorData没有定义的错, 是因为我点击Select的时候才会触发报错

Answer 1

onchange是什么鬼？@change

---

onchange属于原生dom0级别的绑定，会去window上找后面的回调函数。最好别又用vue又用jquery。

---

大概这么写

<select v-model="index" .../>
<div class="chart1" v-show="index === 1"/>
<div class="chart2" v-show="index === 2"/>
<div class="chart3" v-show="index === 3"/>

data () {
    return {
        index: '1'
    }
}

select绑定v-model取值，剩下的关联v-model绑定的值配合v-show就OK了。

Answer 2

哪里来的onchange？没有这个事件