從 Vue.JS 中的函數渲染 JSX

Question

我對 Vue.Js 很陌生，我正試圖弄清楚如何從 Vue.JS 模板中的函數呈現 JSX。 我嘗試遵循與 React 類似的語法； 但是，這似乎是錯誤的。 我已經閱讀了一些關於使用插槽的內容，但我不確定它是如何工作的。 謝謝。

<template>
  <div id="dashboard">
                  {{ this.renderChart(expandTable) }}
  </div>
</template>

<script>
  export default {
    name: 'Dashboard',
    components: {
    },
    data () {
      return {
        expandTable: false,
        symbolsData: [],
        symbolsFilter: ''
      }
    },
    methods: {
      renderChart (expanded) {
        if(!expanded) {
            return ( //JSX I'm trying to render
              <b-col cols="12">
                <chart-widget selectedSymbol={selectedSymbol}></chart-widget>
              </b-col>
            )
          } else {
            return (
              <b-col cols="8">
                <chart-widget :selectedSymbol="selectedSymbol"></chart-widget>
              </b-col>
            )
          }
        }
      }

    },
...
  }
</script>

Answer 1

您不能同時使用模板和 JSX。 它們是如何生成渲染函數的兩種選擇。

對於此處的示例，您可能應該在模板中使用v-if和v-else ，圍繞 HTML 塊替代項。