主页 / user-5318223

timbre timbre's questions

Martin Hope
timbre timbre
Asked: 2024-08-22 23:31:52 +0800 CST
  • 5

目前我将参数保存到 URL 中，如下所示：

  const save = async (parameter: LocationQuery) => {
    await router.push({ path: '', query: { ...route.query, ...parameter } });
  };

像这样调用：

save({ param1: 'abc' });

我还读取并监控如下参数：

const route = useRoute();
const x = route.query.param1;
const y = computed(() => route.query.param1);

但是我在代码的各个功能/部分中都使用了相当多的查询参数，因此将这些代码放在各个地方并不理想。我希望将用法标准化，这样就不会在各个地方使用硬编码的名称。

因此，如果我创建一个带有参数名称的枚举：

export enum QueryParams {
  Param1 = 'param1',
  Param2 = 'param2'
  // ...
}

我可以用它来阅读和监控：

const route = useRoute();
const x = route.query[QueryParams.Param1 as string];
const y = computed(() => route.query[QueryParams.Param1 as string]);

但是如何在保存时使用该名称？例如：

const save = async (name: QueryParams, value: string | number | undefined) => {
    const parameter = // HOW to construct this parameter?
    await router.push({ path: '', query: { ...route.query, ...parameter } });
  };

这显然是错误的：

const parameter = { name: value }; // would creates 'name=' parameter instead of 'param1='

那么有没有办法使用枚举值来构造LocationQuery参数？如果没有，有没有更好的方法可以避免硬编码查询参数名称？

提前致谢。

typescript
Martin Hope
timbre timbre
Asked: 2024-08-21 23:11:15 +0800 CST
  • 5

Vue-router 文档给出了两种具体的使用模式：

const route = useRoute();

// Get the current value
const id = route.params.id;

// Watch for further value changes
watch(
  () => route.params.id,
  (newValue, oldValue) => {
    console.log(`The value changed from ${oldValue} to ${newValue}`);
});

然而，在许多在线示例中，我发现路由通常被用作computed反应属性：

const id = computed(() => route.params.id);

computed我想知道在这种情况下这样做有什么好处？ 似乎这不会捕捉到值的变化，只会使获取值变得过于复杂。还是我遗漏了什么？

typescript
Martin Hope
timbre timbre
Asked: 2024-04-25 03:45:36 +0800 CST
  • 5

我正在尝试将 Tailwind应用于使用Vue3divide创建的 div ：v-for

<div v-for="(i) in [1, 2, 3]" class="divide-y divide-red-400">
  <div>{{ i }}</div>
</div>

但不应用分隔符：

在此输入图像描述

我希望看到这个：

在此输入图像描述

（注意：该图像是使用相同的父 div 创建的class，但没有v-for循环，只是通过静态添加子 div 来创建）

那么有什么方法可以将分隔符应用于v-for循环中的项目吗？任何能产生相同效果的替代方案都可以。谢谢

vue.js