Блог

Я ищу в функции настройки, чтобы отобразить массив кнопок. Для простоты я привел этот пример ниже.

Когда я использую массив и нажимаю или назначаю значения по умолчанию, а затем помещаю массив в функцию визуализации, я не вижу никакой реактивности при нажатии.

 setup(props, {emit, slots}) {
    const base_number = ref(1)

    const base_offset= computed(()=> { return base.value   2 })
    let buttons = [base_offset.value]

    let pageClick =  (event , pageNumber ) => {
       base_number.value = 3
    }

    return  h("ul",{ class: "pagination", 'onClick' : event => { pageClick(event, 1)}},
               buttons
            )
 

Однако , когда я помещаю массив компонентов, подобных этому, в возврат, обновление реактивности и значений работает.

    //On click will update  base_offset
    return  h("ul",{ class: "pagination", 'onClick' : event => { pageClick(event, 1)}},
                      [base_offset.value]
             )

}
 

Что я упускаю и можно ли передать в массиве vnodes?

Вместо того , чтобы возвращать VNode массив напрямую setup() , он должен возвращать функцию визуализации, которая возвращает VNode массив (и вы должны увидеть предупреждение консоли браузера об этом).:

 export default {
  setup() {
    // return h(...) ❌
    return () => h(...) ✅
  }
}
 

В рамках этой функции визуализации создайте buttons массив VNodes . Обратите внимание, что VNode s, созданные вне функции визуализации, не являются реактивными.

 export default {
  setup() {
    //...

    // ❌ non-reactive buttons array
    // let buttons = [base_offset.value, base_offset.value   2, base_offset.value   4]

    return () => {
      // ✅ reactive buttons array
      let buttons = [base_offset.value, base_offset.value   2, base_offset.value   4]

      return h(
        'ul',
        {
          class: 'pagination',
          onClick: (event) => {
            pageClick(event, 1)
          },
        },
        buttons
      )
    }
  }
}
 

ДЕМОНСТРАЦИЯ