Невозможно привязать текст к атрибуту href в шаблоне VueJS - PullRequest
Новая
       19

Невозможно привязать текст к атрибуту href в шаблоне VueJS

1 голос
/ 26 апреля 2020

Я использую VueJS для создания шаблона.

Из данных моих сообщений я смог связать текст в html элементах, таких как span , a и p с использованием синтаксиса Усов. Но когда я пытаюсь связать текст с атрибутом элемента, таким как href внутри элемента a , он не работает.

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

My HTML выглядит так: 

<div id="app">
  <div class="container-fluid">
    <ul class="list-group">
      <post v-for="post in posts" :post="post"></post>
    </ul>
  </div>
</div>

<template id="post-template">
  <li class="list-group-item">
    <a :href="{{posts.url}}">{{ post.title }}</a>
    <p>{{post.text}}</p>
  </li>
</template>

Мой JS выглядит так: 

Vue.component('post', {
  template: "#post-template",
  props: ['post']
});

var vm = new Vue({
  el: "#app",
  data: {
    posts: [
         {
             title: "First post!",
             text: "First text",
             url: "www.firsturl.com"
         },
         {
             title: "Second post!",
             text: "Second text",
             url: "www.secondurl.com"
         },
         {
             title: "Third post!",
             text: "Third text",
             url: "www.thirdurl.com"
         }
    ]}
});

Смотрите мой код в JSFiddle

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Вам не нужно использовать двойную скобку для привязки текста: 

<a :href="post.url">{{ post.title }}</a>
0 голосов
/ 26 апреля 2020

В атрибутах вы должны указывать реквизиты или JS -выражения напрямую без усов: 

<a :href="url">{{ post.title }}</a>
...