Использовать элемент списка данных HTML с VueJS?Не можете использовать гиперссылки? - PullRequest
Новая
       7

Использовать элемент списка данных HTML с VueJS?Не можете использовать гиперссылки?

0 голосов
/ 11 февраля 2019

Я пытаюсь использовать элемент HTML datalist [https://www.w3schools.com/tags/tag_datalist.asp] вместо библиотеки автозаполнения.Я попытался обернуть элемент href вокруг post.title.

К сожалению, похоже, что это невозможно с опцией элемента данных?

Вот мой шаблон: 

<input v-model='post' type='text' list='posts'>
        <datalist id='posts'>
            <option v-for='post in posts' :key='post.id'>
                <a :href='url + `${post.id}`'>{{post.title}}</a>
            </option>
        </datalist>

Скрипт: 

import axios from "axios";
export default {
  name: "SearchBar",
  data() {
    return {
      post: "",
      posts: [],
      url: "https://jsonplaceholder.typicode.com/posts/",
      //placeholder: "Search or jump to item"
    };
  },
  created() {
    this.getPosts();
  },
  methods: {
    getPosts() {
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then(response => {
          console.log(response);
          this.posts = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};

У кого-нибудь есть обходные пути для этого?Спасибо

1 Ответ

0 голосов
/ 12 февраля 2019

друг.если хочешь проверить.С уважением!Вот ссылка ! 

new Vue({
  el: "#app",
  data() {
    return {
      posts: []
    }
  },
  created() {
    this.getPosts()
  },
  methods: {
    getPosts() {
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then(response => {
          console.log(response);
          this.posts = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input list="posts" name="posts">
  <datalist id="posts">
    <option v-for="post in posts" :key="post.id" :value="post.title">
      <a href="google.com">{{ post.title }}</a>
    </option>
  </datalist>
</div>
...