我有一个包含选择、输入字段等的工作表单元素的 php 页面。
我希望表单在没有 js 的情况下继续工作,但如果 js 可用,我想将标准输入转换为增强的 Svelte 组件。
你会如何处理这个问题?
例如。如何将可用于选择标签的所有“选项”传递给将替换它的苗条组件?
问问题
773 次
2 回答
1
把你包<form>
在一个<div>
. 加载 JS 后,它可以查找包装器并将其替换为 Svelte 组件。
import App from './App.svelte'
// get the wrapping <div> element
const wrapper = document.querySelector('.form-wrapper')
// mount your app into the wrapper div
new App({target: wrapper})
如果你想通过选项列表传递props
,只需在构造组件之前从 DOM 中拉取它们:
import App from './App.svelte'
const wrapper = document.querySelector('.form-wrapper')
// get <select> element
const select = wrapper.querySelector('select')
// iterate `<option>` tags and extract `value` and `label`
const options = [...select.options].map(option => ({value: option.value, label: option.innerText}))
// pass `options` as `props`
new App({target: wrapper, props: {options}})
于 2019-12-08T07:43:17.417 回答
0
您可以像在前端使用的任何其他数据一样使这些选项可用:1)在 javascript 文件中对其进行硬编码(不是很灵活,可能不是您需要的)2)做一个fetch
并通过 API 从服务器 3)将它们作为属性添加到 php 中的窗口并在您的苗条应用程序中使用它。
window.something = {
selectOptions: [...]
}
于 2019-10-04T21:05:15.223 回答