Question

我想将href属性设置为item.AppUrl，它来自数据库，并在方法部分呈现。

          <template v-if="header.value == 'ApplicationName'">
        <a id="url" href="#" target="_blank">{{renderData(props.item, header)}}</a>
      </template>

methods: {
  renderData: (item, header) => {
    if (header.value == 'ApplicationName') {
      document.getElementsByTagName("a")[0].setAttribute("href", item.AppUrl);
    }
    let val = "";
    if (header.value.includes('.')) {
      +
    const vals = header.value.split('.')
      val = vals.reduce((acc, val) => acc[val], item)
    } else {
      val = item[header.value]
    }
    if (typeof val === "boolean") {
      val = val ? "Yes" : "No";
    }
    return val;
  }
}

Answer 1

您可以将方法的结果绑定到属性。下面，函数getUrl()的结果通过href绑定到:属性（这是v-bind:href的简写。这样做时，无需尝试设置在函数中手动设置属性。

var app = new Vue({
  el: '#app',
  data: {
   
  },
  methods: {
    getUrl: function(){
      // return any value to demonstrate how this works
      return "https://meta.stackoveflow.com";
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <a :href="getUrl()">This links to META Stack Overflow</a>
</div>

如何在vue.js的脚本部分更改href属性？

1 个答案: