Linked Questions

Popular Questions

Using HTML datalist element with VueJS? Can't use hyperlinks?

Asked by At

I am trying to use HTML's datalist [https://www.w3schools.com/tags/tag_datalist.asp] element rather than an autocompletion library. I tried to wrap an a href element around the post.title.

Unfortunately, it looks like this is not possible with the datalist's option element?

Here's my template:

<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>

Script:

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);
        });
    }
  }
};

Anyone got some workarounds for this? Thank you

Related Questions