Как во vue использовать сторонние модули

Question

Пишет ощибку: что он не видит модуль Html:

<div id='vue'>
    <input v-model="input" placeholder="Name or id"><button v-on:click='pokemonGetInfo()'>ок</button>
    <p>Имя: {{ name }}</p>
    <h1>{{ name }}</h1>
    <img :src=image>
</div>
<script src='https://unpkg.com/pokeapi-js-wrapper/dist/index.js'></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='main.js'></script>

Js:

const P = new Pokedex.Pokedex();

var vue = new Vue({
  el: '#vue',
  data: {
    input: '',
    name: '',
    image: ''
  },
  methods: {
    pokemonName() {
      P.getPokemonByName(this.input)
      .then(function (response) {
        this.name = response.name;
      })
    }
  }
})

Answer 1

Во-первых, неправильно дано имя функции у кнопки. Во-вторых, старайся в хтмл всё в двойные ковычки оборачивать. В-третьих, у меня такой ошибки не наблюдается. Но в апишку ходить не хочет. Вот внизу работающий код.

const P = new Pokedex.Pokedex();

var vue = new Vue({
  el: '#vue',
  data: {
    input: '',
    name: '',
    image: ''
  },
  methods: {
    pokemonName() {
      P.getPokemonByName(this.input)
      .then(function (response) {
        console.log(response);
        this.name = response.name;
      })
      .catch(err => {
        console.log(err);
      })
    }
  }
});

<script src='https://unpkg.com/pokeapi-js-wrapper/dist/index.js'></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id='vue'>
    <input v-model="input" placeholder="Name or id">
    <button v-on:click="pokemonName">ок</button>
    <p>Имя: {{ name }}</p>
    <h1>{{ name }}</h1>
    <img :src="image">
</div>

Answer 2

Я проверил, все работает и мне пришёл ответ от сервера, вот правильный код

const P = new Pokedex.Pokedex();

var vue = new Vue({
  el: '#vue',
  data: {
    input: '',
    name: '',
    image: ''
  },
  methods: {
    pokemonName() {
      console.log(111);
      P.getPokemonByName(this.input)
      .then(response => {
        console.log(response);
        
      })
    }
  }
})

<div id='vue'>
    <input v-model="input" placeholder="Name or id"><button v-on:click='pokemonName'>ок</button>
    <p>Имя: {{ name }}</p>
    <h1>{{ name }}</h1>
    <img :src=image>
</div>

<script src="https://unpkg.com/pokeapi-js-wrapper/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

БЛОГ НА HUSL

Как во vue использовать сторонние модули

Ответы (2 шт):