亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將腳本標簽中的變量傳遞給 Vue 實例

將腳本標簽中的變量傳遞給 Vue 實例

陪伴而非守候 2022-01-13 16:05:04
在我的 Drupal 7 站點的 html 中,我有這個<script>$L = $L.wait(function() {(function($) {      Drupal.behaviors.related_products = {        attach: function (context, settings) {          artiklar = Drupal.settings.related_products.artiklar;          console.log(artiklar);        }      };    })(jQuery);});</script>在上面的變量artiklar 中,我有一些使用 Drupal 行為從服務器端傳遞的數據?,F在,在客戶端,我需要訪問Vue 組件中的變量artiklar ,如下所示:Vue.component('artikel-lista', {    template:`        <ul>          <artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">L?s mer</a></artikel>        </ul>    `,    data(){      return {        artiklar: "",      };    },    mounted: function(){      this.artiklar = artiklar // how can I access the variable "artiklar" here    },});變量中的數據由我在 Vue 組件中需要的一組項目組成。但是如何將腳本標簽中的變量傳遞給 Vue 實例,該實例位于一個單獨的文件中,插入到結束正文標簽之前。任何人?
查看完整描述

2 回答

?
幕布斯7119047

TA貢獻1794條經驗 獲得超8個贊

如果您在全局可見Drupal.settings.related_products.artiklar對象中有數據,那么您可以在 Vue.js 中以幾乎相同的方式引用它?;蛘呷绻仨毷褂么斯δ?,請將數據分配給全局范圍window.*。


new Vue({

  template: `<div>{{foo}} / {{bar}}</div>`,

  data() {

    return {

      foo: Drupal.settings.related_products.artiklar,

      bar: window.artiklarData

    };

  }

}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">Vue App</div>


<script>

  // simulate global variable

  var Drupal = {

    settings: {

      related_products: {

        artiklar: ['fus', 'ro', 'dah']

      }

    }

  };

  (function() {

    window.artiklarData = Drupal.settings.related_products.artiklar;

  })();

</script>

如果您Drupal.settings.related_products.artiklar在創建Vue對象后分配值,您可以嘗試使用文檔中描述的解決方案,例如


const vm = new Vue({

  template: `<div>{{foobar}}</div>`,

  data() {

    return {

      foobar: 'Initial value'

    };

  }

}).$mount("#app");


setTimeout(() => {

  // simulate global variable

  var Drupal = {

    settings: {

      related_products: {

        artiklar: 'Changed value'

      }

    }

  };


  (function() {

    vm.foobar = Drupal.settings.related_products.artiklar;

  })();

}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">Vue App</div>

也許您可以使用 RxJS,但我沒有足夠的知識來判斷它是否正確并舉個例子。


查看完整回答
反對 回復 2022-01-13
?
MM們

TA貢獻1886條經驗 獲得超2個贊

以防萬一其他人在同樣的事情上苦苦掙扎,我將這個答案發布到我自己的問題中(我不小心用錯誤的帳戶發布了問題)。最后證明 Gander 的回答是正確的,我可以直接在 Vue 組件中訪問該變量,而無需先將其存儲為一個全局變量。不過,查看的結果有點奇怪,經過一些試驗后,我發現我必須使用 JSON.parse() 解析結果。這是現在的工作代碼:


Vue.component('artikel-lista', {

    template:`

        <ul>

          <artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">L?s mer</a></artikel>

        </ul>

    `,

    data(){

      return{

      artiklar:""

    }

    },

    mounted:function(){

        this.artiklar = JSON.parse(Drupal.settings.related_products.artiklar);

        console.log(this.artiklar);

  }



});


查看完整回答
反對 回復 2022-01-13
  • 2 回答
  • 0 關注
  • 202 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號