Question

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

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

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

我假设这不是我目前的方式

JSfiddle here

<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

您可以简单地创建方法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>

Answer 2

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

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

Airtable-使用Vue JS格式化“ URL”字段

2 个答案: