api - Airtable - 使用 vue js 格式化“url”字段

Question

再次回到另一个问题，关于从 Airtable 提取的格式化数据：

只需使用此处提供的步骤将一些 Airtable 数据嵌入到我可以设置样式的基本 html 格式中。

问题：如何格式化进入href链接的数据？

我假设这不是我目前的做法

这里的 JSfiddle

<div id="app">
    <ul>
        <li v-for="item in items">
            <h3>{{ item['fields']['Name'] }}</h3>
            <a :href="item['fields']['Link']['url']" v-if="item['fields']['Link']">
                <p>Title: {{ item['fields']['Title'] }}</p>
            </a>
            <p>
                <strong>Link: </strong>
                {{ item['fields']['Link'] }}
            </p>                
        </li>
    </ul>            
</div><!--app-->

JS：

var app = new Vue({
  el: "#app",
  data: {
    items: []
  },
  mounted: function() {
    this.loadItems();
  },
  methods: {
    loadItems: function() {
      // Init variables
      var self = this;
      var app_id = "---";
      var app_key = "---";
      this.items = [];
      axios
        .get(
          "https://api.airtable.com/v0/" +
            app_id +
            "/Characters?view=Grid%20view",
          {
            headers: { Authorization: "Bearer " + app_key }
          }
        )
        .then(function(response) {
          self.items = response.data.records;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
});

Answer 1

好吧，我真的认为我明白了！只需将 ahref 链接更改为此：

<a :href="item['fields']['Link']"> stuff here </a>

Answer 2

你可以简单地创建一个方法formatUrl

methods: {
    formatUrl(url) {
        return url.toLowerCase();
    }
}

然后只是传递你的价值

<a v-if="item['fields']['Link']" :href="formatUrl(item['fields']['Link']['url'])">
    <p>Title: {{ item['fields']['Title'] }}</p>
</a>

此外，您可以使用filters

filters: {
  formatUrl(value) {
    return url.toLowerCase();
  }
}

并且在渲染过程中

<a v-if="item['fields']['Link']" :href="item['fields']['Link']['url'] | formatUrl">
    <p>Title: {{ item['fields']['Title'] }}</p>
</a>