如何将Vue.js中的货币对symbol值传递到HTML文件的TradingView组件？

需要让HTML中的TradingView组件symbol属性跟随Vue.js下拉列表选择的货币对动态变化。Vue中选中的值存储在currSymbol变量中，需将该值传递给HTML内的TradingView初始化脚本，用于设置其symbol参数。

现有代码 #

Vue.js 代码 #

<select v-model="currSymbol" @change="event => socket.emit('symbol:change', {symbol: currSymbol, interval: currInterval})">
  <option v-for="pair in pairs">
    {{ pair.symbol }}
  </option>
</select>

HTML 代码 #

<div id="app">
  <div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
  </div>
</div>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

<script type="text/javascript">
  new TradingView.widget(
  {
    "width": 1000,
    "symbol": "{{ symbol }}",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_02e7f"
  }
  );
</script>

核心思路是在Vue组件内管理TradingView实例，通过监听currSymbol的变化直接更新图表的交易对，避免在外部单独编写初始化脚本。

步骤1：调整HTML结构 #

移除HTML中的TradingView初始化脚本，仅保留容器和TV.js引入，同时给图表容器添加明确ID以便后续操作：

<div id="app">
  <!-- 下拉选择器 -->
  <select v-model="currSymbol" @change="updateTradingViewSymbol">
    <option v-for="pair in pairs" :value="pair.symbol">
      {{ pair.symbol }}
    </option>
  </select>
  <!-- TradingView图表容器 -->
  <div class="tradingview-widget-container">
    <div id="tradingview_chart" class="tradingview-widget-container__widget"></div>
  </div>
</div>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

同时将下拉选择器的@change事件改为自定义方法updateTradingViewSymbol，统一处理更新逻辑。

步骤2：在Vue组件中初始化并控制TradingView #

在Vue的data中存储TradingView实例，组件挂载时初始化图表，监听currSymbol变化时调用TradingView的API更新交易对：

new Vue({
  el: '#app',
  data() {
    return {
      currSymbol: 'BTCUSDT', // 默认选中的交易对
      currInterval: 'D',
      pairs: [{ symbol: 'BTCUSDT' }, { symbol: 'ETHUSDT' }, { symbol: 'BNBUSDT' }], // 示例交易对列表
      tradingViewInstance: null // 存储TradingView实例
    }
  },
  mounted() {
    // 组件挂载后初始化图表
    this.initTradingView();
  },
  methods: {
    initTradingView() {
      // 创建TradingView实例并存储到data中
      this.tradingViewInstance = new TradingView.widget({
        width: 1000,
        symbol: this.currSymbol,
        interval: this.currInterval,
        timezone: "Etc/UTC",
        theme: "light",
        style: "1",
        locale: "en",
        toolbar_bg: "#f1f3f6",
        enable_publishing: false,
        allow_symbol_change: true,
        container_id: "tradingview_chart" // 对应HTML中的容器ID
      });
    },
    updateTradingViewSymbol() {
      // 调用TradingView内置方法更新交易对
      if (this.tradingViewInstance) {
        this.tradingViewInstance.setSymbol(this.currSymbol, this.currInterval, () => {
          // 可选：更新成功后的回调操作
          console.log('交易对已切换为', this.currSymbol);
        });
        // 保留原有的socket事件逻辑
        this.$socket.emit('symbol:change', {symbol: this.currSymbol, interval: this.currInterval});
      }
    }
  }
});

关键点说明 #

• 实例存储：将TradingView实例存入Vue的data中，方便后续调用其API（如setSymbol）实现动态更新。
• 高效更新：使用TradingView自带的setSymbol方法直接修改现有图表的交易对，无需重新创建实例，性能更优。
• 逻辑统一：将下拉选择后的socket事件与图表更新逻辑整合到同一方法中，便于维护。

内容的提问来源于stack exchange，提问作者Vame