Vue3 + Nitro按钮点击无法填充输入框数值问题求助

尝试点击按钮将计算后的数值填充到n-input输入框，但该功能无法正常生效，已尝试修改输入组件配置、调整返回值等操作，均未解决问题。以下是相关Vue3脚本代码与模板代码：

脚本代码 #

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { useAppStore } from '~/stores/app.store';
import { clearIntervalAsync, setIntervalAsync } from 'set-interval-async';

export default {
  setup() {
    const app = useAppStore();
    let userID = useCookie('userID');

    const currentExchange = ref(app.getUserSelectedExchange);
    const currentSymbol = ref(app.getUserSelectedMarket);

    const bestBid = ref(null);
    const bestAsk = ref(null);
    const lowerPrice = ref(null);
    const upperPrice = ref(null);

    let orderBookInterval = null;

    onMounted(() => {
      orderBookInterval = setIntervalAsync(fetchOrderBookPooling, 500);
    });

    onUnmounted(() => {
      clearIntervalAsync(orderBookInterval);
    });

    async function fetchOrderBookPooling() {
      try {
        const orderBook = await $fetch('/api/v1/fetchOrderBook', {
          query: {
            userID: userID.value,
            exchange: currentExchange.value,
            symbol: currentSymbol.value
          }
        });
        if (orderBook.data) {
          bestBid.value =
            orderBook.data.bids.length > 0 ? orderBook.data.bids[0][0] : null;
          bestAsk.value =
            orderBook.data.asks.length > 0 ? orderBook.data.asks[0][0] : null;

          // 直接更新值
          lowerPrice.value = bestBid.value ? bestBid.value * 0.95 : null;
          upperPrice.value = bestAsk.value ? bestAsk.value * 1.05 : null;
        }
      } catch (error) {
        console.error('Error fetching order book:', error);
      }
    }
    function setLowerPrice() {
      if (bestBid.value) {
        lowerPrice.value = bestBid.value * 0.95;
      }
    }

    function setUpperPrice() {
      if (bestAsk.value) {
        upperPrice.value = bestAsk.value * 1.05;
      }
    }

    return {
      bestBid,
      bestAsk,
      lowerPrice,
      upperPrice,
      setLowerPrice,
      setUpperPrice
    };
  }
};
</script>

模板代码（原代码，存在问题） #

<template>
  <n-card>
    <n-space vertical :size="12">
      <div class="asks box">
        <div class="row">
          <div class="col">Best Ask: {{ bestAsk }}</div>
        </div>
      </div>

      <div class="bids box">
        <div class="row">
          <div class="col">Best Bid: {{ bestBid }}</div>
        </div>
      </div>

      <div>
        <n-button @click="lowerPrice">Setează 5% Bid</n-button>
        <n-button @click="upperPrice">Setează 5% Ask</n-button>
      </div>

      <div>
        <n-input
          id="lowerPriceInput"
          v-model="lowerPrice"
          name="lowerPrice"
          placeholder="Lower Price"
        >
        </n-input>
        <n-input
          id="upperPriceInput"
          v-model="upperPrice"
          name="upperPrice"
          placeholder="Upper Price"
        >
        </n-input>
      </div>
    </n-space>
  </n-card>
</template>

问题分析与解决方案 #

核心问题 #

模板中按钮的@click事件绑定错误：你绑定的是lowerPrice和upperPrice这两个ref变量，而非脚本中定义的setLowerPrice和setUpperPrice函数。点击按钮时只会读取变量值，不会触发赋值逻辑。

修复步骤 #

将按钮的点击事件修改为对应的函数即可：

<div>
  <n-button @click="setLowerPrice">Setează 5% Bid</n-button>
  <n-button @click="setUpperPrice">Setează 5% Ask</n-button>
</div>

修复后的完整模板 #

<template>
  <n-card>
    <n-space vertical :size="12">
      <div class="asks box">
        <div class="row">
          <div class="col">Best Ask: {{ bestAsk }}</div>
        </div>
      </div>

      <div class="bids box">
        <div class="row">
          <div class="col">Best Bid: {{ bestBid }}</div>
        </div>
      </div>

      <div>
        <n-button @click="setLowerPrice">Setează 5% Bid</n-button>
        <n-button @click="setUpperPrice">Setează 5% Ask</n-button>
      </div>

      <div>
        <n-input
          id="lowerPriceInput"
          v-model="lowerPrice"
          name="lowerPrice"
          placeholder="Lower Price"
        >
        </n-input>
        <n-input
          id="upperPriceInput"
          v-model="upperPrice"
          name="upperPrice"
          placeholder="Upper Price"
        >
        </n-input>
      </div>
    </n-space>
  </n-card>
</template>

修改后点击按钮会调用对应的赋值函数，将计算后的数值填充到输入框中。

内容的提问来源于stack exchange，提问作者Alex