Question

我＆＃39;我试图在vue中实现动态Uri模板

数据：

new Vue({
  el: '#app',
  data: {
     "navigation": [
        {
          "url": "https://domainxxx.org/{param1}",
          "param1": "John",
          "param2": "123"

        },
        {
          "url": "https://otherdomain.org/{param2}",
          "param1": "Other",
          "param2": "43213432143214"

        }
        ]
  }})

代码：

<div id="app">
 <template v-for="row in navigation">
 <br/>
  <a  :href="row.url"> Hello </a>  <<<<<<<<<<<<<<<
 </template>
</div>

对于此示例预期链接（href）

https://domainxxx.org/ {param1}＆gt; https://domainxxx.org/John
https://otherdomain.org/ {param2}＆gt; https://otherdomain.org/43213432143214

在绑定属性期间是否有任何选项可以进行模板化？

Answer 1

您可以使用计算属性+任何模板引擎或简单字符串连接来实现此目的。

但是，在你的例子中，我没有在两个网址之间设置任何模式，你能告诉我为什么要对它们进行参数化吗？

编辑：好的，得到了这个;）您需要存储唯一的网址模板。所以在这种情况下我会添加url提取方法：

methods: {
  getUrl: function(navigation) {
    return TemplateEngineOfYourChoice.Template(navigation.url, navigation);
  }
}

<a  :href="getUrl(row)"> Hello </a>

Answer 2

DonMateo的回答是正确的：您需要使用自定义方法来呈现每行的网址。这里我使用Mustache，但您可以使用您选择的模板语言：

Mustache.tags = ['{', '}'] // Using custom delimiters, since the default is {{ }}
new Vue({
  el: '#app',
  data: {
     "navigation": [
        {
          "url": "https://domainxxx.org/{param1}",
          "param1": "John",
          "param2": "123"

        },
        {
          "url": "https://otherdomain.org/{param2}",
          "param1": "Other",
          "param2": "43213432143214"

        }
        ]
  },
  methods: {
    getURL: function(row) {
       return Mustache.render(row.url, row)
    }
  }
})

模板：

<a :href="getURL(row)"> Hello </a>

Answer 3

Jst有完整的衣服谢谢你@donMateo我会接受你的衣服，因为它引导我解决这个问题。我现在还不确定什么是最好的方法使用计算的poperty或函数，函数更容易，所以发布解决方案。

所以answear是使用功能

<a  :href="getUrl(url,data)"> Hello </a>

这是我们为每个对象提供动态网址临时文件的情况

我找到了两种做模板的方法 - https://medialize.github.io/URI.js/uri-template.html 和一些解决我案例的自定义代码

 getUrl: function (url,data)
        {
            var keys = Object.keys(data);
            for (var i = 0; i < keys.length; i++) {
                var key = keys[i];
                url = url.replace(/{[^{}]+}/g, data[key]);
            }
            return url;

        }

vue.js Uri动态模板

3 个答案: