vue.js 相关问题

我正在使用 Apexchart 的条形图，并注意到我无法更改 x 轴的标签，即类别。下面是组件： {{magnitudeByFreq}} ... 我正在使用 Apexchart 的条形图，并注意到我无法更改 x 轴的标签，即 categories。以下是组件： <template> <div> {{magnitudeByFreq}} {{chartOptions}} <apex-chart width="500" type="bar" :options="chartOptions" :series="series"></apex-chart> </div> </template> <script> export default { props: { processedMouseData: null, gradientCountByType: null, magnitudeByFreq: null, }, data: function() { return { chartOptions: { chart: { id: 'vuechart-example' }, xaxis: { categories: []//['Positive', 'Neutral', 'Negative'] } }, series: [{ name: 'series-1', data: [] }] } }, mounted() { }, watch: { gradientCountByType: function() { console.log(this.series.data) this.gradientCountByType ? this.series[0].data = this.gradientCountByType : console.log("Not working") this.gradientCountByType ? this.chartOptions.xaxis.categories = ['Positive', 'Neutral', 'Negative'] : console.log("No xaxis") }, magnitudeByFreq: function() { this.magnitudeByFreq ? this.series[0].data = Object.values(this.magnitudeByFreq) : console.log("ABX") this.magnitudeByFreq ? this.chartOptions.xaxis.categories = Object.keys(this.magnitudeByFreq) : console.log("ABA") } } }; </script> 当前 categories 设置为 []。这是因为我希望根据使用它的道具来填充不同的数据。即 gradientCountByType 或 magnitudeByFreq。下面两行应该设置 category: this.gradientCountByType ? this.chartOptions.xaxis.categories = ['Positive', 'Neutral', 'Negative'] : console.log("No xaxis") this.magnitudeByFreq ? this.chartOptions.xaxis.categories = Object.keys(this.magnitudeByFreq) : console.log("ABA") 他们似乎根本不更新类别。不过，我应该提到的是，模板 {{magnitudeByFreq}} 和 {{chartOptions}} 中显示的内容确实反映了 category 变量发生了变化： {{chartOptions}} 显示： { "chart": { "id": "vuechart-example" }, "xaxis": { "categories": [ "Positive", "Neutral", "Negative" ], "convertedCatToNumeric": false } } 和 { "chart": { "id": "vuechart-example" }, "xaxis": { "categories": [ "+0", "+100", "+1000", "+2000" ], "convertedCatToNumeric": false } } 为什么categories属性无法正确显示？无论出于何种原因，categories 显示的是数字。我的猜测是通过更改数据属性实际上并不会更新图表。相反，我们应该创建对图表的引用： <apex-chart ref="radar" type="radar" height="350" :options="chartOptions" :series="series"></apex-chart> 然后我们可以使用 updateSeries 方法更新数据并使用 updateOptions 方法更新图表选项： this.$refs.radar.updateSeries([{ name: 'Series 1', data: [your_new_data_here] //ie [1,2,3,4] }]) this.$refs.radar.updateOptions({ xaxis: { categories: [your_new_categories_here] //ie ["a","b","c","d"] } }) <apex-chart ref="chart" :options="options" :series="series"/> 图表组件具有刷新功能。这样我们就可以重新渲染图表。 this.series[0].data = [yourData]; this.options.xaxis.categories = [yourCategories] this.$refs.chart.refresh(); 在 vue 3 中，您应该将图表选项设置为响应式类型，以便您可以随时更改它。 const chartOptions =ref({// your codes}); 然后在每个方法或生命周期中 onMounted( () => { chartOptions.value.xaxis.categories=myArrayValues; }); } 我最近遇到了这个问题。要动态更新图表的 x 轴类别，您需要迭代数组（新类别）（使用 for 或 forEach），并使用 push() 方法将数组的每个元素添加到 x 轴类别。 let newCategories = ['Positive', 'Neutral', 'Negative'] newCategories.forEach(category => { this.chartOptions.xaxis.categories.push(category) })

vue.js apexcharts

回答 4 投票 0

如何将 excel 文件从 Python Bottle 后端发送到 Vue JS 前端？使用 Bottle static_file() 会导致 CORS 错误

如何将运行后端的PC上保存的excel文件发送到请求该文件的前端浏览器（从另一台机器访问）？我有一个 python Bottle 后端，我想用它来...

python excel vue.js bottle

回答 1 投票 0

在 Vue3/Nuxt3 中根据用户输入动态更改 tailwindcss 颜色

我正在尝试为用户建立一种定义网站主色的方法。在定义我的顺风类时，我想使用 bg-primary-600 之类的东西，而不是硬编码颜色，所以......

vue.js nuxt.js vuejs3 tailwind-css nuxtjs3

回答 3 投票 0

如何在vite/vue3中使用其他组件的sass全局变量

我想使用和更改其他组件的全局变量，我的文件结构如下所示...... 我的变量位于 global.sass 文件中，但无法访问其他组件中的变量。

vue.js variables sass vuejs3 vite

回答 3 投票 0

后端运行时用axios访问api有问题吗？

api.js:14 GET http://localhost:8080/api/todos/todos net::ERR_FAILED 500（内部服务器错误） [email protected]:[email protected]:[email protected]:[email protected]:159r...

spring-boot vue.js axios

回答 1 投票 0

为什么vue3在没有深度嵌套的情况下不重新渲染反应变量的引用

我正在尝试了解 vue3 中的 Composition-API Reactivity。我想构建一个搜索栏，它将立即向我显示模板中的结果。为此，我有一个反应变量搜索...

javascript vue.js

回答 1 投票 0

如何通过 typescript 在 Vue2 中使用带有组合 api 的 vue 类组件

从 'vue-property-decorator' 导入 { Component, Vue } 从 '@/composables/customerRepository' 导入 { CustomerContext, getCustomerRepository } @成分出口</desc> <question vote="7"> <pre><code><script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import { CustomerContext, getCustomerRepository } from '@/composables/customerRepository' @Component export default class CustomerList extends Vue { search = '' setup(): CustomerContext { const ctx = getCustomerRepository() return ctx } } </script> </code></pre> <p>在 Vue 2 中，我想通过 TypeScript 将 Composition API 与类组件样式一起使用，但我不确定语法是否正确。此外，<pre><code>setup()</code></pre>函数不会自动调用。</p> <p><pre><code>vue-class-component</code></pre>可以在 TypeScript 中使用 Compostion API 吗？</p> </question> <answer tick="true" vote="21"> <h3>Vue 2</h3> <p>首先，确保您已经安装了 Vue 2 的 <a href="https://www.npmjs.com/package/@vue/composition-api" rel="noreferrer"><pre><code>@vue/composition-api</code></pre></a> 插件：</p> <pre><code>// main.ts import Vue from 'vue' import VueCompositionApi from '@vue/composition-api' Vue.use(VueCompositionApi) </code></pre> <p>然后将 <pre><code>setup()</code></pre> 定义为 <pre><code>@Component</code></pre> 选项（而不是类方法）：</p> <pre><code>// MyComponent.vue @Component({ setup(props, context) { //... } }) export default class CustomerList extends Vue { //... } </code></pre> <h3>Vue 3</h3> <p>对于 Vue 3，<pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="a4d2d1c189c7c8c5d7d789c7cbc9d4cbcac1cad0e49c8adc">[email protected]</a></code></pre> 导出一个 <pre><code>setup()</code></pre> API，您可以将其分配给局部变量：</p> <pre><code><template> <div>counter: {{myContext.counter}}</div> <button @click="myContext.increment">Increment</button> </template> <script lang="ts"> import { Vue, setup } from 'vue-class-component' import { ref } from 'vue' export default class MyComponent extends Vue { myContext = setup(() => { const counter = ref(0) return { counter, increment() { counter.value++ } } }) } </script> </code></pre> <p><em><strong>注意：</strong> 从 <pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="f1878494dc929d908282dc929e9c819e9f949f85b1c9dfc1dfc1dc8392dfc0">[email protected]</a></code></pre> 开始，<pre><code>setup()</code></pre> 不接收任何参数，包括来自选项 API<a href="https://v3.vuejs.org/guide/composition-api-setup.html#arguments" rel="noreferrer"> 中使用的 <pre><code>context</code></pre> 的 <pre></pre><code>props</code><pre> 和 </pre><code>setup()</code></a> 参数。</em></p> </answer> <answer tick="false" vote="0"> <p>使用class来编写setup，支持vue2和vue3</p> <pre><code><template> <p>{{ count.text }}</p> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Setup, Hook } from 'vue-class-setup'; @Setup class Count { public value = 0; public get text() { return String(this.value); } @Hook('mounted') public init() { this.value++; } } export default defineComponent({ setup() { return { count: new Count() } } }) </script> </code></pre> <p><a href="https://github.com/fmfe/vue-class-setup" rel="nofollow noreferrer">https://github.com/fmfe/vue-class-setup</a></p> </answer> <answer tick="false" vote="0"> <pre><code>import ClassComponent from 'vue-class-component' ClassComponent.registerHooks(['setup']) </code></pre> <p>将其放在项目的开头，然后一切都会按您的预期进行</p> </answer> </body></html>

typescript vue.js vuejs2 vue-composition-api

回答 0 投票 0

vue.js 相关问题

最新问题