Как я могу изменить атрибут href в разделе скриптов в vue.js? - PullRequest
Новая
       21

Как я могу изменить атрибут href в разделе скриптов в vue.js?

0 голосов
/ 11 июля 2019

Я хочу установить атрибут 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;
  }
}

1 Ответ

0 голосов
/ 11 июля 2019

Вы можете привязать результат метода к атрибуту. Ниже результат функции 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>
...