小编Bou*_*him的帖子

我如何将按钮单击事件与 vuetify 数据表中一行内的行单击事件分开，...................... ………………………………………………………………………………………………………………………………………………………… ……………………

例如：

当我点击行时

当我点击编辑按钮时，它也会发生行点击事件

<script>
  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      desserts: [],
      editedIndex: -1,
      editedItem: {
        name: '',
        calories: 0,
        fat: …

我有一个 v-for 循环，循环遍历从 api 返回的一些数据，并将键设置为等于 api 中对象的 id。现在我想创建一个单击事件来获取被单击元素的 v-bind:key 值。这样我就可以使用它在 posts[] 数组中查找该对象的所有数据。但我不知道是否可以这样做，如果可以的话如何？

这是我的代码；

<template>
    <div id="summary_section">
        <h2>Summary</h2>

        <div id="summary_board">
            <div class="column">
                <div class="head">
                    <h3>Opportunities</h3>
                </div>

                <div class="body">
                    <div class="post" 
                        v-for="post in posts"
                        v-bind:key="post._id"
                        v-on:click="getPostData"
                    >
                        <p>{{ post._id }}</p>
                        <p class="company">{{ post.company_name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return{
                posts: []
            };
        },
        created() {
            axios.get('http://localhost:5000/')
            .then(res => {
                console.log(res.data);
                const data = res.data;
                this.posts = data;
            })
            .catch(error => …

我正在组件的 Setup 方法中进行 Axios 调用。然后我想设置一个名为 books 的变量。在 vue 2 中，我将在创建的钩子中进行调用，然后用于this设置变量。this在 vue 3 中，setup 方法中没有可用的内容，那么如何在 axios 调用之外访问数据呢？我想获取一系列书籍，然后将其设置为 books 变量。如何做到这一点？在 Vue 3 中是否有更好的方法来做到这一点？我的设置方法如下：

  setup() {
      let books = reactive<Array<Book>>([])
        HTTP.get('/books')
            .then(response => {
                //Normally here I would do this.books
                books = response.data
            })
            .catch(function (error) {
                console.log(error);
            })
            return { books }
  }

我在商店里有一系列物品Vuex。像这样：

[
  {
    id: 1,
    value: 'some value'
  },
  {
    id: 2,
    value: 'other value'
  },
  ...
]

有没有办法创建一个 getter 来获取数组的某个项目id？

就像是

getArrItem(state, id) {
  return state.find(item => item.id === id);
}

我试图以我正在编写的方法访问我的数据，但它似乎不起作用。我收到 TS2339 Typescript 错误，指出该类型中不存在该属性。

TS2339: Property 'players' does not exist on type '{ onAddPlayers(): void; getPlayerPlaceholder(index: number): string; }'.   
    47 |   methods: {
    48 |     onAddPlayers() {
  > 49 |       this.games = prepareGames(this.players as PadelPlayer[]);
       |                                      ^^^^^^^
    50 |     },
    51 |     getPlayerPlaceholder(index: number) {
    52 |       const playerNumber = Number(index) + 1;

这是组件的代码：

<script lang="ts">
import { PadelGame } from "@/models/padelGame.interface";
import { getPadelPlayers, prepareGames } from "../services/americanoService";
import { PadelPlayer } from "@/models/padelPlayer.interface";

const padelGames: PadelGame[] = []; …

我对 VueJS 比较陌生，现在我正在尝试替换

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>

经过

<script src="https://unpkg.com/vue@next"></script>

问题是，在此更改之后，以前的工作代码被破坏了：

<script>
    window.addEventListener('load', () => {
        const defaultOptions = {
            position: 'bottom-center'
        }
        Vue.use(Toasted, defaultOptions) # The error arises here
    });

</script>

我遇到了

未捕获的类型错误：Vue.use 不是函数

我在这里做错了什么？

更新：我现在没有使用 webpack。没有 webpack 可以做到这一点吗？

我有带有 的侧边栏组件Links，并且我需要Link在打开特定 URL 时更改颜色。

React 中最好的解决方案是什么？

我收到此错误：

vue-router.esm-bundler.js?6c02:3265 Uncaught TypeError: Cannot read property 'location' of undefined
at Object.install (vue-router.esm-bundler.js?6c02:3265)
at Object.use (runtime-core.esm-bundler.js?5c40:2948)
at eval (main.js?56d7:7)
at Module../src/main.js (app.js:1088)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1113)
at __webpack_require__ (app.js:854)
at checkDeferredModules (app.js:46)
at app.js:994

文件 router.js：

import {createRouter, createWebHistory} from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
  mode: routerHistory,
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/todos',
      component: () => import('./views/Todos.vue')
    }
  ]
})

export default router;

文件 …

大家好，我在我的 Laravel 项目中启动 Vue 没有什么问题。

这是我的 package.json

"devDependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.32",
        "@fortawesome/free-brands-svg-icons": "^5.15.1",
        "@fortawesome/free-regular-svg-icons": "^5.15.1",
        "@fortawesome/free-solid-svg-icons": "^5.15.1",
        "@vue/compiler-sfc": "^3.0.5",
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.17",
        "laravel-mix-vue3": "^0.7.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2",
        "vue-template-compiler": "^2.6.10"
    }

网络包组合：

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

这是我的 app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting …

我是 vue 初学者，想请教一个问题！\n我的英语不好，但我尝试完整地描述我的问题，谢谢。

目前我用来vue学习如何访问API，但我希望能够每3秒自动再次触摸API来更新屏幕，但我真的不\xe2\x80\x99不知道如何实现这一点？

希望得到您的帮助，再次感谢您观看我的问题。

我的例子