鍍金池/ 問答/HTML/ vue項目中已經(jīng)聲明了函數(shù), 但是調(diào)用的時候說沒有定義?

vue項目中已經(jīng)聲明了函數(shù), 但是調(diào)用的時候說沒有定義?

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();
  }
};
    /* 獲取最新的數(shù)據(jù) */
    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()函數(shù)的值

clipboard.png

clipboard.png

  1. changeMonitorData沒有定義的錯, 是因為我點擊Select的時候才會觸發(fā)報錯

clipboard.png

回答
編輯回答
眼雜

onchange是什么鬼?@change


onchange屬于原生dom0級別的綁定,會去window上找后面的回調(diào)函數(shù)。最好別又用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取值,剩下的關(guān)聯(lián)v-model綁定的值配合v-show就OK了。

2018年3月14日 12:02
編輯回答
護她命

哪里來的onchange?沒有這個事件

2017年12月8日 17:50