Svelte - 我的按钮内的文字不会改变。

Question

情况是这样的：我有一个多个按钮，执行不同的异步函数。

我有多个按钮执行不同的异步功能

所有这些按钮都是进度按钮

我想要的是，当按钮被按下时，标签会改变，显示功能的状态（功能名称，加载，完成或错误，如果需要的话）。

一切工作正常，但文字没有变化

注意： 现在我还没有实现这四个功能，但有了一个就可以了

这里是组件。

组件1 - 容器

<script>
  import Button from '../components/Button.svelte'
  import { cubiqSetUp } from '../../../store/store.js'
  import { fly } from 'svelte/transition'
  import URLS from '../../../api/endpoints.js'

  let loadingEffect = false
  let ButtonText = null
  async function calibrate(current) {
    console.log(current.detail)
    loadingEffect = true
    ButtonText = 'CARGANDO...'
    console.log(ButtonText)
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect = false
        ButtonText = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText = 'ERROR'
        loadingEffect = false
        setTimeout(() => {
          ButtonText = current.detail
        }, 1500)
      })
  }
</script>

<div class="Buttons">
  <div class="Buttons-container">
    <Button
      on:active={() => console.log('Pending')}
      {loadingEffect}
      ButtonText="CUBICAR" />
    <Button
      on:active={calibrate}
      {loadingEffect}
      ButtonText="CALIBRAR"
      delay={400} />
    {#if $cubiqSetUp.print_info === 'true' && $cubiqSetUp.OCR === 'true'}
      <Button ButtonText="IMPRIMIR" delay={800} />
    {:else if $cubiqSetUp.print_info === 'true'}
      <Button ButtonText="GUARDAR" delay={800} />
      <Button ButtonText="IMPRIMIR" delay={1200} />
    {:else if $cubiqSetUp.OCR === 'true'}
      <!-- No additional buttons -->
    {:else}
      <Button ButtonText="GUARDAR" delay={800} />
    {/if}
  </div>
</div>

组件1--按钮

<script>
  import { fly } from 'svelte/transition'
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  export let ButtonText = ''
  export let delay = 200
  export let loadingEffect = false
</script>

<div
  transition:fly={{ delay, y: 200, duration: 2000 }}
  on:click={() => dispatch('active', ButtonText)}
  class="progress-btn {loadingEffect ? 'active' : ''}">
  <div class="btn">{ButtonText}</div>
  <div class="progress" />
</div>

如果你们能给我看看，我会很感激的

Answer 1

我假设你的问题具体涉及到的是 CALIBRAR 按钮，因为它是唯一一个真正触发一个完整的动作响应周期的按钮。

我不知道为什么当你将按钮文本设置为预定义值时，你希望它能更新。

<Button
  on:active={calibrate}
  {loadingEffect}
  ButtonText="CALIBRAR"
  delay={400} />

当你把它设置为一个预定义的值时 ButtonText 在您上面的组件调用中，是一个 道具名称 而完全没有联系。ButtonText 中定义的变量。<script> 节。你必须明确地这样做。

<Button
  on:active={calibrate}
  {loadingEffect}
  ButtonText={ButtonText}
  delay={400} />

或者，由于道具名和变量名是一样的，你可以使用速记。

<Button
  on:active={calibrate}
  {loadingEffect}
  {ButtonText}
  delay={400} />

你也必须更新你的脚本部分来正确初始化你的 ButtonText 变量，因为它现在用于设置按钮的默认文本。

<script>
  ...
  let ButtonText = 'CALIBRAR'
  ...
</script>

请注意，这显然只对这个单一的校准按钮有效。如果你有几个带有动态文本的按钮，你很可能需要使用一个数组或键控对象来保存它们的默认值和当前状态，而不是一个单一的变量。

Answer 2

我的做法如下。

<script>
  import Button from '../components/Button.svelte'
  import { cubiqSetUp } from '../../../store/store.js'
  import { fly } from 'svelte/transition'
  import URLS from '../../../api/endpoints.js'

  let loadingEffect = [false, false, false, false]
  let ButtonText = ['CUBICAR', 'CALIBRAR', 'GUARDAR', 'IMPRIMIR']
  async function calibrate(current) {
    loadingEffect[1] = true
    ButtonText[1] = 'CARGANDO...'
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect[1] = false
        ButtonText[1] = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText[1] = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText[1] = 'ERROR'
        loadingEffect[1] = false
        setTimeout(() => {
          ButtonText[1] = current.detail
        }, 1500)
      })
  }

  async function cubicate(current) {
    loadingEffect[0] = true
    ButtonText[0] = 'CARGANDO...'
    let { calibrateURL } = await URLS()
    await fetch(calibrateURL)
      .then(response => {
        loadingEffect[0] = false
        ButtonText[0] = 'LISTO'
        response.json()
        setTimeout(() => {
          ButtonText[0] = current.detail
        }, 1500)
      })
      .catch(error => {
        ButtonText[0] = 'ERROR'
        loadingEffect[0] = false
        setTimeout(() => {
          ButtonText[0] = current.detail
        }, 1500)
      })
  }
</script>

<div class="Buttons">
  <div class="Buttons-container">
    <Button
      on:active={cubicate}
      loadingEffect={loadingEffect[0]}
      ButtonText={ButtonText[0]} />
    <Button
      on:active={calibrate}
      loadingEffect={loadingEffect[1]}
      ButtonText={ButtonText[1]}
      delay={400} />
    {#if $cubiqSetUp.print_info === 'true' && $cubiqSetUp.OCR === 'true'}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[3]}
        loadingEffect={loadingEffect[3]}
        delay={800} />
    {:else if $cubiqSetUp.print_info === 'true'}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[2]}
        loadingEffect={loadingEffect[2]}
        delay={800} />
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[3]}
        loadingEffect={loadingEffect[3]}
        delay={1200} />
    {:else if $cubiqSetUp.OCR === 'true'}
      <!-- No additional buttons -->
    {:else}
      <Button
        on:active={() => console.log('Pending')}
        ButtonText={ButtonText[2]}
        loadingEffect={loadingEffect[2]}
        delay={800} />
    {/if}
  </div>
</div>

我不确定这是否是最好的做法 但它的效果很好

注意： 我还需要实现其余的功能。