Javascript 苗条-我的按钮内的文字不变 情况如下：

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

它们都是进度按钮

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

一切正常，但文本不变

注意：目前我还没有实现所有四个功能，但其中一个应该可以工作

下面是组件

组件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>

从“../components/Button.svelte”导入按钮
从“../../../store/store.js”导入{cubiqSetUp}
从“苗条/过渡”导入{fly}
从“../../api/endpoints.js”导入URL
设loadingEffect=false
let ButtonText=null
异步功能校准（当前）{
console.log（current.detail）
loadingEffect=true
ButtonText='CARGANDO…'
console.log（按钮文本）
让{calibrateURL}=等待URL（）
等待提取（校准）
。然后（响应=>{
loadingEffect=false
ButtonText='LISTO'
response.json（）
设置超时（（）=>{
ButtonText=current.detail
}, 1500)
})
.catch（错误=>{
ButtonText='错误'
loadingEffect=false
设置超时（（）=>{
ButtonText=current.detail
}, 1500)
})
}
console.log（'Pending'）}
{loadingEffect}
ButtonText=“CUBICAR”/>
{#如果$cubiqSetUp.print_info=='true'&&$cubiqSetUp.OCR=='true'}
{：如果$cubiqSetUp.print_info==='true'}
{：如果$cubiqSetUp.OCR==='true'，则为else}
{:else}
{/if}

组件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>

从“苗条/过渡”导入{fly}
从“svelte”导入{createEventDispatcher}
const dispatch=createEventDispatcher（）
导出let ButtonText=“”
导出let延迟=200
导出let loadingEffect=false
分派（'活动'，按钮文本）}
class=“progress btn{loadingEffect？active'：''}>
{ButtonText}

---

如果你们看一下，我将不胜感激。我假设你们的问题与

CALIBRAR

按钮有关，因为它是唯一一个真正触发整个行动/响应周期的按钮

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

上面组件调用中的

buttonext

是一个道具名称，根本没有连接到您在

部分中定义的

buttonext

变量。您必须明确地执行此操作：

或者，由于道具名称和变量名称相同，您可以使用缩写：

您还必须更新脚本部分以正确初始化

ButtonText

变量，因为它现在用于设置按钮的默认文本：

...
let ButtonText='CALIBRAR'
...

---

请注意，这显然仅适用于此单个校准按钮。如果您有多个带有动态文本的按钮，则可能必须使用数组或键控对象来保存其默认值和当前状态，而不是单个变量。

我的操作如下：

<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>

从“../components/Button.svelte”导入按钮
从“../../../store/store.js”导入{cubiqSetUp}
从“苗条/过渡”导入{fly}
从“../../api/endpoints.js”导入URL
让loadingEffect=[假，假，假，假]
let ButtonText=['CUBICAR'，'CALIBRAR'，'GUARDAR'，'IMPRIMIR']
异步功能校准（当前）{
loadingEffect[1]=真
ButtonText[1]=“CARGANDO…”
让{calibrateURL}=等待URL（）
等待提取（校准）
。然后（响应=>{
加载效果[1]=错误
ButtonText[1]=“LISTO”
response.json（）
设置超时（（）=>{
ButtonText[1]=当前的.detail
}, 1500)
})
.catch（错误=>{
ButtonText[1]=“错误”
加载效果[1]=错误
设置超时（（）=>{
ButtonText[1]=当前的.detail
}, 1500)
})
}
异步功能立方体（当前）{
loadingEffect[0]=真
ButtonText[0]=“CARGANDO…”
让{calibrateURL}=等待URL（）
等待提取（校准）
。然后（响应=>{
loadingEffect[0]=false
ButtonText[0]=“LISTO”
response.json（）
设置超时（（）=>{
ButtonText[0]=当前详细信息
}, 1500)
})
.catch（错误=>{
ButtonText[0]=“错误”
loadingEffect[0]=false
设置超时（（）=>{
ButtonText[0]=当前详细信息
}, 1500)
})
}
{#如果$cubiqSetUp.print_info=='true'&&$cubiqSetUp.OCR=='true'}
console.log（'Pending'）}
ButtonText={ButtonText[3]}
loadingEffect={loadingEffect[3]}
延迟={800}/>
{：如果$cubiqSetUp.print_info==='true'}
console.log（'Pending'）}
ButtonText={ButtonText[2]}
loadingEffect={loadingEffect[2]}
延迟={800}/>
console.log（'Pending'）}
ButtonText={ButtonText[3]}
loadingEffect={loadingEffect[3]}
延迟={1200}/>
{：如果$cubiqSetUp.OCR==='true'，则为else}
{:else}
console.log（'Pending'）}
ButtonText={ButtonText[2]}
loadingEffect={loadingEffect[2]}
延迟={800}/>
{/if}

我不确定它们是否是最佳实践，但效果很好

---

注意：我仍然需要实现其余的函数

我看到其中有很多重复，以及直接访问数组索引，而不是某种形式的编程循环。我会将所有与按钮相关的属性（API子路由、标签、延迟、效果）放入一个对象数组中，并编写一个fu