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

问题描述

再次回到另一个问题，关于从 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);
        });
    }
  }
});

标签： apivue.jshyperlinkformattingairtable

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

问题描述

解决方案

推荐阅读