vue-component 相关问题

我有文件 HorizontalBarChartObeya.vue，下面是源代码我有文件 HorizontalBarChartObeya.vue，下面是源代码 <template> <Bar :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey" :css-classes="cssClasses" :styles="styles" :width="width" :height="height" /> </template> import { Bar } from "vue-chartjs"; import ChartDataLabels from "chartjs-plugin-datalabels"; import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, } from "chart.js"; import { max } from "moment"; ChartJS.register( Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ChartDataLabels, ); export default { name: "BarChart", components: { Bar, }, props: { chartId: { type: String, default: "bar-chart", }, datasetIdKey: { type: String, default: "label", }, width: { type: Number, default: 4, }, height: { type: Number, default: 4, }, cssClasses: { default: "", type: String, }, styles: { type: Object, default: () => {}, }, plugins: { type: Array, default: () => [], }, dataObeya: { type: Array, default: "", }, dataLabels: { type: Array, default: "", }, maxNumber: { type: Number, default: 0, }, }, data() { return { chartData: { labels: this.dataLabels, datasets: [ { borderRadius: 16, borderSkipped: false, backgroundColor: ["#2F5DE5", "#FA236E", "#49E366"], borderColor: [], pointBorderColor: "#2554FF", data: this.dataObeya, datalabels: { anchor: "end", align: "end", }, }, ], }, chartOptions: { barThickness: 24, indexAxis: "y", responsive: true, plugins: { legend: { display: false, }, tooltip: { callbacks: { title: function () { return `Total Post Obeya`; }, }, }, }, scales: { x: { beginAtZero: true, max: this.maxNumber + 5, ticks: { display: false, }, grid: { display: false, }, }, y: { ticks: { display: true, crossAlign: "far", }, grid: { display: false, }, }, }, }, }; }, watch: { dataObeya: function () { this.chartData.datasets[0].data = this.dataObeya; }, maxNumber: function () { this.chartOptions.scales.x.max = this.maxNumber + 5; }, }, }; 我遇到了这些错误应用程序仍然正常运行，但它让我很不安，因为我有另一个名为 BarChart.vue 的图表组件，但没有发现错误。有人可以帮帮我吗？谢谢你我尝试找到解决方案，但仍然无法消除错误，我希望错误现在会消失我认为问题是数据类型与默认数据不匹配。 props: { dataObeya: { type: Array, default: [], }, dataLabels: { type: Array, default: [], } }, 请尝试更改以上道具。您也可以给出多种类型 props: { dataObeya: { type: [Array,String], default: "", }, dataLabels: { type: [Array,String], default: "", } } 我希望这有帮助。原因是因为在脚本中我使用了 lang="ts" 这是不必要的所以我删除了 lang 并解决了问题，谢谢

typescript vue.js vue-component typeerror typescript-typings

回答 2 投票 0

Typescript 错误属性在类型（TS2339、TS2365）上不存在

typescript vue.js vue-component typeerror typescript-typings

回答 2 投票 0

在组件中异步计算？

我正在组件中找到异步计算方法的解决方案：目前，我的组件是： {{消息}} 导出默认值{ 计算...</desc> <question vote="51"> <p>我正在组件中找到异步计算方法的解决方案：</p> <p>目前，我的组件是：</p> <pre><code><div class="msg_content"> {{messages}} </div> <script> export default { computed: { messages: { get () { return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}) .then(response => response.data) } } }, } </script> </code></pre> <p>结果： <pre><code>{}</code></pre></p> <p>如何在<pre><code>Promise</code></pre>模式下重写？因为我认为我们可以通过写入 Promise 模式来异步计算。</p> </question> <answer tick="true" vote="51"> <p>计算属性基本上是缓存其结果的函数，这样就不必在每次需要时都进行计算。他们<strong>根据他们使用的无功值自动更新</strong>。</p> <p>您的计算不使用任何反应性项目，因此它是计算的没有意义。它现在返回一个 Promise（假设 <pre><code>then</code></pre> 的通常行为）。</p> <p>尚不完全清楚您想要实现什么，但我最好的猜测是您应该创建一个数据项来保存 <pre><code>response.data</code></pre>，并在 <pre></pre><code>api.get</code><a href="https://v2.vuejs.org/v2/api/#created" rel="noreferrer"> 钩子<pre>中进行 </pre><code>created</code></a> 调用。类似的东西</p> <pre><code>export default { data() { return { //... messages: [] }; }, created() { api.get(`/users/${this.value.username}/message/`, { 'headers': { 'Authorization': 'JWT ...' } }) .then(response => this.messages = response.data); } } </code></pre> </answer> <answer tick="false" vote="26"> <p>es7 通过使用 <pre><code>async</code></pre> 和 <pre><code>await</code></pre> 与 axios 返回的 Promise 结合起来，使得这件事变得非常简单。您需要 <a href="https://github.com/foxbenjaminfox/vue-async-computed/blob/master/README.md" rel="noreferrer">vue-async-compulated</a> 包。</p> <pre><code>export default { asyncComputed: { async myResolvedValue() { return await api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}) .then(response => response.data) } } } </code></pre> </answer> <answer tick="false" vote="2"> <p>我遇到了类似的情况，每次数据或道具发生变化时，我都需要重新运行计算函数以从服务器获取数据。</p> <p>无需安装任何额外的包（<pre><code>vue-async-computed</code></pre>或<pre><code>vue3-async-computed</code></pre>，如其他答案所指出），您可以通过创建“虚拟”计算方法来强制重新加载数据。</p> <p>假设您希望在用户每次键入用户名时从服务器获取数据，并且根据键入的内容，您希望显示来自服务器的给定消息。</p> <p>从下面的示例中，本例中的 <pre><code>username</code></pre> 和 <pre><code>messages</code></pre> 都是反应数据，但它们之间没有直接联系，因此让我们通过返回其值来创建一个依赖于 <pre><code>username</code></pre> 的计算，这将强制它每次 <pre><code>username</code></pre> 更改时都会被调用。现在您只需要调用一个可以异步的函数，并在从服务器获取后更新<pre><code>messages</code></pre>。</p> <p>在下面的示例中，我使用“:dummy”只是为了强制调用我的计算函数。</p> <pre><code><template> <input v-model="username"> <div class="msg_content" :dummy="force_react"> {{messages}} </div> </template> <script> export default { data: function () { return { messages: "", username: "", }; }, computed: { force_react: function() { this.get(); // called every time that this.username updates return this.username; // becase its result depends on username } }, methods: { async get() { // get's called every time that this.username updates console.log("Got called"); let response = await api.get(`/users/${this.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}); this.messages = response.data; } }, } </script> </code></pre> <p>您可以在 Vue SFC 游乐场中看到一个工作示例 <a href="https://sfc.vuejs.org/#__DEV__eyJBcHAudnVlIjoiPHRlbXBsYXRlPiBcbiA8aW5wdXQgdi1tb2RlbD1cInVzZXJuYW1lXCI+XG4gPGRpdiBjbGFzcz1cIm1zZ19jb250ZW50XCIgOmR1bW15PVwiZm9yY2VfcmVhY3RcIj5cbiAgIHt7bWVzc2FnZXN9fVxuPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBkYXRhOiBmdW5jdGlvbiAoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG1lc3NhZ2VzOiBcIlwiLFxuICAgICAgdXNlcm5hbWU6IFwiXCIsXG4gICAgfTtcbiAgfSxcbiAgY29tcHV0ZWQ6IHtcbiAgICBmb3JjZV9yZWFjdDogZnVuY3Rpb24oKSB7ICAvLyBjYWxsZWQgZXZlcnkgdGltZSB0aGF0IHRoaXMudXNlcm5hbWUgdXBkYXRlcyBiZWNhc2UgaXRzIHJlc3VsdCBkZXBlbmRzIG9uIGl0XG4gICAgICB0aGlzLmdldCgpO1xuICAgICAgcmV0dXJuIHRoaXMudXNlcm5hbWU7XG4gICAgfVxuICB9LFxuICBtZXRob2RzOiB7XG4gICAgYXN5bmMgZ2V0KCkgeyAvLyBnZXQncyBjYWxsZWQgZXZlcnkgdGltZSB0aGF0IHRoaXMudXNlcm5hbWUgdXBkYXRlc1xuICAgICAgY29uc29sZS5sb2coXCJHb3QgZ290IGNhbGxlZFwiKTtcbiAgICAgIHRoaXMubWVzc2FnZXMgPSB0aGlzLm1lc3NhZ2VzICsgXCIgY2FsbGVkIFwiO1xuICAgICAgLy9sZXQgcmVzcG9uc2UgPSBhd2FpdCBhcGkuZ2V0KGAvdXNlcnMvJHt0aGlzLnVzZXJuYW1lfS9tZXNzYWdlL2AsIHsnaGVhZGVycyc6IHsgJ0F1dGhvcml6YXRpb24nOiAnSldUIC4uLicgfX0pO1xuICAgICAgLy90aGlzLm1lc3NhZ2VzID0gcmVzcG9uc2UuZGF0YTtcbiAgICB9XG4gIH0sXG59XG48L3NjcmlwdD4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNi9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM2L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSJ9" rel="nofollow noreferrer"></a></p> </answer> <answer tick="false" vote="0"> <p>为什么不使用观察者？ <a href="https://vuejs.org/guide/essentials/watchers.html#basic-example" rel="nofollow noreferrer">Vue 文档</a></p> <p>您可以在观察者的回调中使用异步函数。</p> </answer> </body></html>

javascript vue.js vuejs2 vue-component

回答 0 投票 0

Vue 2 中如何让组件在 props 改变后重新渲染？

我的组件很简单： {{btnmsg}} 从“chico”导入 {Btn} </desc> <question vote="12"> <p>我的组件很简单：</p> <pre><code><template> <btn :color="color" @click="toggleColor">{{btnmsg}}</btn> </template> <script> import { Btn } from 'chico' export default { name: 'AButton', components: { Btn }, data() { return { btnmsg: 'Legia pany', colors: [ 'blue', 'black', 'green', 'orange', 'teal', 'cyan', 'yellow', 'white' ], color: 'red' } }, methods: { toggleColor() { this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))]; } } } </script> </code></pre> <p>ChicoFamily 的 <pre><code><Btn></code></pre> 是这样的：</p> <pre><code><template> <button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role"> <slot></slot> </button> </template> <script> import classNames from 'classnames'; export default { props: { tag: { type: String, default: "button" }, color: { type: String, default: "default" }, //...it takes a lot of props... }, data() { return { className: classNames( this.floating ? 'btn-floating' : 'btn', this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color, //...classes derived from these props... ), }; } } </script> </code></pre> <p>这是一个按钮，单击时应该更改其颜色。单击它确实会更改传递的道具，但不会以新颜色重新渲染按钮。</p> <p>为什么传递不同的 prop 不会重新渲染按钮？</p> <p> <pre><code><Btn></code></pre> 的颜色取自从 prop 派生的 Bootstrap 类。难道 Btn 获得了正确的道具，但 <pre><code>className</code></pre> 机制却没有跟上？</p> </question> <answer tick="false" vote="9"> <p>在组件上设置 :key 是强制 Vue 重新渲染组件的最佳方式。如果需要组件重新渲染，只需修改 key 的值，Vue 就会重新渲染。</p> </answer> <answer tick="true" vote="6"> <p>这不是重新渲染问题——当 prop 改变时，组件确实会重新渲染。问题是重新渲染并没有什么好处，因为您将颜色设置为 <em><code>data</code></em> 中的 <pre>初始值</pre>，而不是作为数据更改时重新评估的 <pre><code>computed</code></pre> 属性。</p> <p>按照您的方式，创建实例时将设置 <pre><code>className</code></pre> 一次，并且不会再次设置。</p> <p>为了使 <pre><code>className</code></pre> 在每次更改传入的道具之一时重新评估，您必须从中创建一个 <pre><code>computed</code></pre> 属性，如下所示：</p> <p>Btn 组件：</p> <pre><code>export default { props: { [...] }, computed: { className() { return classNames( this.floating ? 'btn-floating' : 'btn', this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color ); }, }, } </code></pre> </answer> <answer tick="false" vote="0"> <p>按照您的方式，类名将在创建实例时设置一次，并且不会再设置一次。</p> <p>您应该使用计算作为 className </p> </answer> </body></html>

vue.js vuejs2 vue-component vue-props

回答 0 投票 0

即使分配给同一个 newVal 也如何触发观察者

我正在使用 vue3 和 options api 如以下 stackbiltz 链接所示我有一个子组件，其中包含一个按钮，单击该按钮时，应调用刷新方法。刷新（...

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

如何在 Vue.js 中将 prop 作为参数传递

我是 Vue 新手，我正在制作一个组件，该组件根据父组件给出的 style 属性来更改其类属性。当我尝试调用替换时，Vue 不执行任何操作这里是“...

javascript html vue.js vuejs3 vue-component

回答 1 投票 0

vue3：可选择将 RouterLink 变成链接

我检查了文档，但在打开 vue 功能请求之前，我想确定它是否已经实现。我希望“我的链接文本”可以选择成为链接，而不必重复内容...

vuejs3 vue-component vue-router

回答 1 投票 0

“类型错误：无法读取未定义的属性‘get’”，Axios，Vue.JS

当我尝试使用 axios 从 api 访问 get 请求时，我从 Vue 收到这个奇怪的错误，我收到“TypeError：无法读取未定义的属性‘get’” &... 当我尝试使用 axios 从 api 访问 get 请求时，我从 Vue 收到这个奇怪的错误，我收到“TypeError：无法读取未定义的属性‘get’” <template> <div class="home"> <h1>{{ msg }}</h1> <p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p> </div> </template> <script> var Vue = require('vue'); // import axios from "axios"; window.axios=require('axios'); export default { name: 'Home', props: { msg: String }, component: { }, mounted: function () { alert('Hi '); this.axios.get('https://api.github.com/users') .then(value => { alert(value); }); } }; </script>  <style scoped> </style> 在您的情况下，this并不引用window。更好的方法是在组件中导入 axios： import axios from 'axios'; 更高效的方法是在main.js文件中全局设置一次： Vue.prototype.$http = axios 并在任何你想要的地方使用它 this.$http 我遇到了同样的问题，只需添加 type="module" 即可解决我的问题。谢谢你

vue.js vuejs2 axios vue-component vuex

回答 2 投票 0

在 vue 应用程序中添加新值时从下拉列表中删除值

我正在尝试在我的 vue 项目中创建日期过滤器。所以对于这一点，观点是：我正在尝试在我的 vue 项目中创建日期过滤器。所以对于这一点，观点是： <div class="dropdown-item d-flex flex-column"> <div v-for="(filter, index) in dateFilters" :key="index" class="dropdown-item-inner" > <div class="mb-2 d-flex"> <select v-model="filter.dateType" class="form-select mr-1"> <option value="startDate">Start Date</option> <option value="endDate">End Date</option> </select> <select v-model="filter.filterType" class="form-select mr-1"> <option v-for="option in dateOptions" :value="option.value" :key="option.value" > {{ option.label }} </option> </select> <input type="date" v-model="filter.date" class="form-control" /> <button :disabled="dateFilters.length < 2" class="button is-transparent m-0 d-flex horizontal-center vertical-center" @click="clearDateFilterRule(index)" > <i class="fas fa-trash mr-2"></i> </button> </div> </div> <div class="date-filter-buttons"> <button v-if="dateFilters.length < 8" class="button is-transparent m-0 d-flex horizontal-center vertical-center" @click="addDateFilter" > <i class="fas fa-plus mr-2"></i>Add Rule </button> <button type="button" class="button is-transparent m-0" @click="clearDateFilters" > Clear </button> </div> </div> 实际查看如下：所以我有 dateOptions 和 dateFilters： data() { return { dateFilters: [ { dateType: "startDate", filterType: "eq", date: "", }, ], dateOptions: [ {value: "eq", label: "Date is"}, {value: "not", label: "Date is not"}, {value: "lte", label: "Date is before"}, {value: "gte", label: "Date is after"}, ], }; }, 这是我的添加事件： addDateFilter() { const selectedValue = this.dateFilters.map((filter) => filter.filterType); this.dateOptions = this.dateOptions.filter(option => !selectedValue.includes(option.value)); if (this.dateOptions.length > 0) { this.dateFilters.push({ dateType: "startDate", filterType: this.dateOptions[0].value, date: "", }); } }, 所以我的目标是当我单击添加规则按钮（即 addDateFilter 事件）时，我将您在图片中看到的同一行添加到 dateFilters 中。但我想从中删除 dateOptions 下拉菜单（日期是）。例如，如果在第一行中使用日期并在中间下拉列表的下一行中推送日期过滤器，则应删除日期。这一部分，我是成功的。但问题是，当我将行推入 dateFilters 时，第一行的值也消失了。所以我有这样的看法：如何解决？您的 addDateFilter 的问题在于它没有反应性。当下拉列表更改时，其他下拉列表需要对这些更改做出反应，即在一个下拉列表中选择不同的选项应该使原始选项在所有下拉列表中可用。我将首先集中精力解释它，假设“开始日期”作为唯一可用的日期类型，因为这就是我首先解决的方法（或者如果您只想跳到考虑“开始日期”的最终解决方案和“结束日期”，向下滚动）。仅限“开始日期” 使用计算属性，我们可以反应性地跟踪下拉列表中所有当前选定和未选定的日期选项。 computed: { // getter for all selected options selectedOptions() { return this.dateFilters.map(df => df.filterType) }, // getter for all unselected options unselectedOptions() { return this.dateOptions.filter(o => !this.selectedOptions.includes(o.value)) } }, addDateFilter 方法可以简化为仅将新过滤器推送到 dateFilters 数组 addDateFilter() { this.dateFilters.push({ dateType: 'startDate', filterType: this.unselectedOptions[0].value, date: '' }) }, 每个下拉列表应列出所有未选择的选项+当前选择的选项。我将在一个新方法中返回此有效选项列表，该方法将所选选项作为参数。然后可以在 v-for 中使用此方法来返回每个下拉列表的所有有效选项。 // return unused options with currently selected option validDateOptions(val) { const selected = this.dateOptions.find(o => o.value === val) return [ ...this.unselectedOptions, selected] }, <select v-model="filter.filterType" class="form-select mr-1"> <option v-for="option in validDateOptions(filter.filterType)" :key="option.value" :value="option.value" > {{ option.label }} </option> </select> Vue SFC Playground 示例允许“开始日期”和“结束日期” 由于“开始日期”和“结束日期”都可以具有相同的选定选项之一，因此我们必须在上述方法中添加 dateType 作为附加过滤器和参数。唯一的问题是我们应该避免使用 computed 属性的参数，因此这些实际上需要更改为方法： methods: { // getter for all selected options selectedOptions(type) { return this.dateFilters.filter(df => df.dateType === type).map(df => df.filterType) }, // getter for all unselected options unselectedOptions(type) { return this.dateOptions.filter(o => !this.selectedOptions(type).includes(o.value)) }, addDateFilter 默认情况下会添加一个新的“startDate”过滤器，但如果已添加所有这些过滤器，则需要添加一个“endDate”过滤器。 addDateFilter() { let type = 'startDate' if (this.unselectedOptions(type).length === 0) { type = 'endDate' } this.dateFilters.push({ dateType: type, filterType: this.unselectedOptions(type)[0].value, date: '' }) }, 新的validDateOptions现在还需要一个额外的参数： // return unused options with currently selected option validDateOptions(type, val) { const selected = this.dateOptions.find(o => o.value === val) return [ ...this.unselectedOptions(type), selected] }, 模板代码中提供： <select v-model="filter.filterType" class="form-select mr-1"> <option v-for="option in validDateOptions(filter.dateType, filter.filterType)" :key="option.value" :value="option.value" > {{ option.label }} </option> </select> Vue Playground 示例未解决的问题上面的代码没有考虑如果有两个具有相同选项但不同类型的下拉菜单并且您将它们更改为相同类型会发生什么，例如开始日期 |日期是 |月/日/年结束日期 |日期是 |月/日/年更改为：开始日期 |日期是 |月/日/年开始日期 |日期是 |月/日/年这将是无效的，但尚不清楚应如何处理。您需要使用一个方法向 dateType 下拉列表添加一个事件侦听器，该方法可以决定是否忽略更改、显示错误、交换日期类型值或执行其他操作。由于这不是您最初问题的一部分，并且有多种方法可以处理它，因此我将其留给您。

vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

Vuejs 3 如何以编程方式获取组件实例属性

我有一个用 vue 2 编写的函数，我需要修改 vue 3。有一个名为 Modal 的组件，它是一个带有很多道具和选项的确认框。在代码库中它调用 showPrompt

javascript vue.js vuejs2 vuejs3 vue-component

回答 1 投票 0

当数组 vue3 的一部分时更新模型

当模型处于该数组的循环中时，如何更新该数组：例如我有一个数组 const number = ref([1,2,3]); 我有一个使用值作为 mod 循环遍历数组的组件...

vuejs3 vue-component vue-composition-api v-model

回答 2 投票 0

vue-component 相关问题

最新问题