Vue动态修改音频url

Posted 2023-04-06

参考技术A 在网页加载完毕后，动态地通过 this.musicUrl = '音频地址' 添加音频地址，发现并没反应，解决方法如下：

可以通过使用 vue 中的 refs 属性， this.$refs.audio 表示我们绑定一个 ref 属性值为 audio 的标签，设置其的 src 属性，也就是音频的地址，就可以通过动态绑定音乐的播发地址。

效果如下：

为 Vue Select2 包装器组件使用动态 AJAX URL

【中文标题】为 Vue Select2 包装器组件使用动态 AJAX URL

【英文标题】：Use dynamic AJAX URL for Vue Select2 wrapper component

【发布时间】：2018-03-07 14:26:25

【问题描述】：

我修改了Wrapper Component Example 从 VueJS 文档中包含 AJAX 数据源选项。 Here 是我的代码。

但是，我想动态设置我的select2组件的ajaxurl属性最好是这样，

<select2 :options="options" v-model="selected" url="dynamic-url-here">
  <option disabled value="0">Select one</option>
</select2>

我该怎么做？

【参考方案1】：

将属性添加到组件的props:

Vue.component('select2', 
    props: ['options', 'value', 'url'],

将 AJAX 选项移动到范围在 select2 组件之外的变量或该组件的数据元素：

Vue.component('select2', 
    props: ['options', 'value', 'url'],
    template: '#select2-template',
    data: function() 
      return 
          ajaxOptions: 
              url: this.url,
              dataType: 'json',
              delay: 250,
              tags: true,
              data: function(params) 
                  return 
                      term: params.term, // search term
                      page: params.page
                  ;
              ,
              processResults: function(data, params) 
                  params.page = params.page || 1;
                  return 
                      results: data,
                      pagination: 
                          more: (params.page * 30) < data.total_count
                      
                  ;
              ,
              cache: true
          
      ;
  ,

在初始化 select2 时使用该变量：

mounted: function() 
    var vm = this
    $(this.$el)
       .select2(
           placeholder: "Click to see options",
           ajax: this.ajaxOptions
       )

为 url 添加一个观察者：

watch: 
    url: function(value) 
        this.ajaxOptions.url = this.url;
        $(this.$el).select2( ajax: this.ajaxOptions);
   

设置属性：

<select2 :options="options" v-model="selected" :url="url">

url 在应用的 data 对象中定义。

在this plunker example 中查看演示。

【讨论】：

我通过将data-url 属性添加到<select2> 标记并使用vm.$el.dataset.url, 在我的组件中获取它找到了一个临时解决方法。太好了，谢谢。

它可以工作，但是只有在输入 3 个字符后才能调用 ajax @SAMOnela