时间戳

首页 > 解决方案 > 如何更改 vue.js 脚本部分中的 href 属性？

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

问题描述

我想将 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;
  }
}

标签： javascripthtmlvue.jsdatatablevuetify.js

解决方案

您可以将方法的结果绑定到属性。下面，使用(this 是 . 的简写) 将函数的结果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>

推荐阅读