无法将文本绑定到

无法将文本绑定到

本文介绍了无法将文本绑定到 VueJS 模板中的 href 属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 VueJS 构建模板.

从我的帖子"数据中,我已经能够将文本绑定到 html 元素中,例如 spanapMustache 语法.但是当我尝试将文本绑定到 a 元素中的 href 等元素属性时,它不起作用.

我查看了不同的教程,但没有一个具体说明如何在同一代码中将文本绑定到元素 - 大多数显示一个或另一个,但不在同一个模板中一起显示.

我的 HTML 如下所示:

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

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

我的 JS 看起来像这样:

Vue.component('post', {模板:#post-template",道具:['post']});var vm = new Vue({el: "#app",数据: {帖子: [{title: "第一篇文章!",text: "第一个文本",网址:www.firsturl.com"},{title: "第二个帖子!",text: "第二个文本",网址:www.secondurl.com"},{title: "第三个帖子!",text: "第三个文本",网址:www.thirdurl.com"}]}});

查看我在 JSFiddle 中的代码

解决方案

在属性中,你必须直接指明 props 或 JS 表达式,不要有胡须:

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

I am using VueJS to build a template.

From my 'posts' data, I have been able to bind text into html elements such as span, a, and p using the Mustache syntax. But when I try to bind text into an element attribute such as href within the a element, it does not work.

I have looked at different tutorials but none show specifically how I can bind text to elements and their attributes within the same code - most show one or the other but not together in the same template.


My HTML looks like this:

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

My JS looks like this:

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


See my code in JSFiddle

解决方案

In attributes you have to indicate props or JS-expressions directly without mustaches:

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

这篇关于无法将文本绑定到 VueJS 模板中的 href 属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 21:41