Свойство или метод "urlImg" не определен в экземпляре, но на него ссылаются во время рендеринга - PullRequest
Новая
       32

Свойство или метод "urlImg" не определен в экземпляре, но на него ссылаются во время рендеринга

0 голосов
/ 31 января 2020

Я пытаюсь создать форму отправки, но все мои v-модели дают мне эту ошибку. Вот один пример того, как я создаю входные данные формы: 

<template>
<div class="card mx-xl-5">
<!-- Card body -->
<div class="card-body">
  <div>
    <form v-on:submit.prevent="pushLocation">
      <div class="form-row">
        <div class="col-md-6">
          <label>Name:</label>
          <input
            type="text"
            class="form-control"
            v-model="txtLocationName"
          />
        </div>
        <div class="col-md-6">  <div class="card mx-xl-5">
             <label>Description</label>
          <input
            type="text"
            class="form-control"
            v-model="txtLocDescription"
            placeholder="Description"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="type">Tipo de localização</label>
        <select class="form-control" id="type" v-model="typeLoc">
          <option value="museum">Museum</option>
          <option value="restaurant">Restaurant</option>
          <option value="tourist_attraction">Monument</option>
          <option value="art_gallery">Galery</option>
        </select>
      </div>
      <div class="col-md-6">
        <label>Imagem</label>
        <input type="url" class="form-control" v-model="urlImg" placeholder="Link" />
      </div>
      <div class="form-group row">
        <div class="col-auto">
          <button type="submit" class="btn btn-primary">Add</button>
        </div>
      </div>
    </form>
  </div>
</div>

И вот как я устанавливаю свойства в моем скрипте: 

name: "LocationList",


data: function() {
return {
  id: 0,
  txtLocationName: "",
  txtLocDescription: "",
  typeLoc: "",
  urlImg: "",
  listLocation: [],
  locationChecked: false
};},
methods: {
getLastLocationId() {
  if (this.listLocation.length) {
    return this.listLocation[this.listLocation.length - 1].id;
  } else {
    return 0;
  }
},
checkLocationName() {
  if (this.listLocation.length) {
    for (const location of this.listLocation) {
      if (location.Name == this.txtLocName) {
        (this.locationChecked = false),
          alert("nome de localização indisponivel");
      } else {
        this.userChecked = true;
      }
    }
  }
},



pushLocation() {
  this.checkLocationName();
  this.getCoordenates();
  if (this.locationChecked == true) {
    this.$store.commit("ADD_USER", {
      id: this.getLastLocationId() + 1,
      Name: this.txtLocationName,
      Description: this.txtLocDescription,
      Type: this.typeLoc,
      imgLink: this.urlImg
    });
    this.$router.push({ name: "adminLocations" });
  } else {
    alert("erro no registo");
  }
}

}

Я делал этот тип форм несколько раз, но я могу понять, почему у меня эта ошибка. Я добавил оставшуюся часть моего vue компонента. Я получаю сообщение об ошибке для всех свойств и методов, а не только для «urlImg». Значения всех свойств, которые существуют в данных и находятся в форме, дают мне эту ошибку.

Последний пункт, последняя функция, pushLocation (), также выдает ошибку, говоря, что это не настоящая функция.

...