Я не мог передать данные данных из функции в "Монтированном" методу в "методах" через свойство данных (состояние) - PullRequest
Новая
       20

Я не мог передать данные данных из функции в "Монтированном" методу в "методах" через свойство данных (состояние)

0 голосов
/ 11 июня 2019

Я довольно новичок в Vue.js.Я рисую карту SVG с D3 и файл Geojson.чтобы карта отображалась при загрузке страницы, я написал код в Mounting.код также имеет некоторые связанные с картой функции, такие как нажатие на функцию и наведение курсора для отображения всплывающих подсказок и т. д.

Теперь вот сценарий: когда я нажимаю на состояние на карте, я хочу обнаружитьимя штата и передать его методу.Затем метод нарисует диаграмму данных на основе заданного состояния.

функция "clicked" в Mounting обрабатывает событие click на карте svg.но я не смог передать состояние clicked из функции "Clicked" в смонтированном методе в методе.

это функция "clicked" в смонтированном: 

  mounted: function mounted(){// Zoom to feature on click
  function clicked(d,i) {

      var width = 410;
      var height = 600;
      var centered;
      var path = d3.geoPath()
        .projection(projection);

      var features = d3.select(".features");

      var x, y, k;
      if (d && centered !== d) {
        // Compute the new map center and scale to zoom to
        var centroid = path.centroid(d);
        var b = path.bounds(d);
        x = centroid[0];
        y = centroid[1];
        k = .8 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
        centered = d
      } else {
        x = width / 2;
        y = height / 2;
        k = 1;
        centered = null;
      }

      //Highlight the new feature
      features.selectAll("path")
          .classed("highlighted",function(d) {
              return d === centered;
          })
          .style("stroke-width", 1 / k + "px"); // Keep the border width constant

      //Zoom and re-center the map
      /*features
          .transition()
          .duration(1000)
          .attr("transform","translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")");*/

          //"state" is data property
          // d.properties.gov_name_f is the clicked state I want to pass to 
          and then read it from a method
          this.state= d.properties.gov_name_f;

          //now here the data is passed normally inside "state" but it becomes empty when I try to read it from a method 
          if (this.state === "Nabeul" || this.state=== "Dar Chaabane El Fehri") {
            console.log("samer lives here "+ this.state);
          }else{
            console.log("samer doesn't live in "+this.state);
    }

  };}

это метод, которому я хочу передать свойство данных «state»: 

methods: {
  refresh(){
      this.id++;
      this.query = "select%20A%2CE";
      console.log("fuck "+this.state);
      //this.state is supposed to return the clicked state, but it returns an empty data property
      switch (this.state) {
            case "Nabeul":
              this.query = "select%20A%2CQ";
              this.id++;
              console.log(this.state);
      }
    },
}

это вывод журнала консоли при отладке: вывод консоли

первый журнал получен "нажал"функция в монтированном и втором входе в систему из метода, который повторяет то же свойство данных, но возвращает пустой объект.

объекты данных: 

data() {
    return {
      state: "",
      gov: "gouvernorat",
      del: "delegations",
      query: "",
      gouvernorat: 0,
      id: 0,
    };
  },

1 Ответ

0 голосов
/ 11 июня 2019

Хорошо. Кажется, у Вью проблемы с поиском данных.Есть несколько причин, которые могут это вызвать.

- В зависимости от того, как вы создаете объект или компонент vue, синтаксис для данных будет другим.Пример:

Использование экспорта по умолчанию 

export default {
data() {
    return {...}
},
 methods:{...},
}

Или 

export default {
data: ()=>{
    return {...}
},
methods:{...},

}

Использование объекта vue 

<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

Использование компонента vue 

Vue.component('button-counter', {
data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Еще одна ошибка, которая может быть причиной, заключается в том, что по любой причине в Vue вы можете вызывать this.data только в самой внешней области видимости метода,Если вы хотите получить доступ к нему в другой области метода, вам нужно использовать var example = this;, а затем во внутренней области вы можете использовать example.data.Например, вот пример проекта, над которым я работаю: 

export default {
data() {
    return {
        loading: false,
        partner: '',
        conenctions: [],
        users: [],
        orgs: []
    }
},
methods:{

    loadConn(){
        var vm = this;
        axios.get('http://localhost:8000/ext/list_conn/')
        .then(function(response){
            vm.conenctions = response.data;
            console.log(vm.conenctions);
        })
    },
},
}

Приведенный выше код будет работать, но следующий код не будет 

export default {
data() {
    return {
        loading: false,
        partner: '',
        conenctions: [],
        users: [],
        orgs: []
    }
},
methods:{

    loadConn(){
        axios.get('http://localhost:8000/ext/list_conn/')
        .then(function(response){
            this.conenctions = response.data;
            console.log(this.conenctions);
        })
    },
},
}

Надеюсь, это поможет с вашей ошибкой

edit: Также убедитесь, что данные находятся в самой внешней области видимости вашего vue-объекта или компонента, как в моих примерах.Если data () {...} находится внутри методов: {...} или смонтированы {...}, это также может вызвать ошибку, которую вы описываете

...